路由

前端路由的工作方式

1. 用户点击了页面上的路由连接
2. 导致了URL地址栏中的Hash值发生了变化
3. 前端路由监听到了Hash地址的变化
4. 前端路由把当前Hash地址对应的组件渲染到浏览器中 前端路由 指的是Hash地址与组件之间的对应关系 底层原理

 // 只要当前的App组件 一被创建就立即监听window 对象的 onhashchange 事件
    window.onhashchange=()=>{
      // console.log('监听',location.hash);
      // if(location.hash==='#/home'){
      //   this.comName='Home'
      // }else if(location.hash==='#/movie'){
      //   this.comName='Movie'
      // }else if(location.hash==='#/about'){
      //   this.comName='About'
      // }else{

      // }
      switch(location.hash){
        case '#/home':this.comName="Home"
        break;
        case '#/movie':this.comName="Movie"
        break;
        case '#/about':this.comName="About"
        break;

      }
    }

安装和配置vue-router

1. 安装vue-router包
2. 创建路由模块 在src源代码目录下 新建router/index.js路由模块

// 1.导入Vue和VueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'

// 2.调用Vue.use()函数 把VueRouter 安装为Vue的插件
Vue.use(VueRouter)

// 3.创建路由的实例对象
const router =new VueRouter()

// 4.向外共享路由的实例对象
export default router

3. 导入并挂载路由模块 在main.js入口文件 中

// 导入路由模块 拿到路由的实例对象
import router from '@/router/index.js'

new Vue({
  render: h => h(App),
  // 在vue项目中 要想把路由用起来 必须把路由实例对象 通过下面的方式进行挂载
  // router:路由的实例对象 注 属性值和属性名一致 可以简写
  router
}).$mount('#app')

4. 声明路由连接和占位符

<!-- 只要在项目中 安装和配置了 vue-router 就可以使用 router-view-->
    <!-- 它的作用很单纯 占位符 -->
    <router-view></router-view>

使用

在路由模块 index.js中导入组件 然后创建hash地址与组件的对应关系 使用routes

// 导入需要的组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

// 3.创建路由的实例对象
const router =new VueRouter({
  // routes是一个数组 作用 定义 hash地址 与 组件 之间的对应关系
  routes:[
    {path:'/home',component:Home},
    {path:'/movie',component:Movie},
    {path:'/about',component:About},

  ]
})

可以使用 router-link来替代普通的a连接

使用to属性来代表href 可以不用加#

<!-- 当安装和配置了vue-router 后 就可以使用 router-link来替代普通的a连接 -->
    <router-link to="/home">首页</router-link>
    <router-link to="/movie">电影</router-link>
    <router-link to="/about">关于</router-link>

路由重定向

路由重定向指的是：用户在访问地址A的时候 强制用户跳转到地址C 从而展示特定的组件页面 通过路由规则的redirect属性 指定一个新的路由地址 可以很方便的设置路由的重定向

const router =new VueRouter({
  // routes是一个数组 作用 定义 hash地址 与 组件 之间的对应关系
  routes:[
    // 当用户访问/ 的时候 通过redirect属性跳转到/home对应的路由规则
    {path:'/',redirect:'/home'},
    {path:'/home',component:Home},
    {path:'/movie',component:Movie},
    {path:'/about',component:About},

  ]
})

嵌套路由

1. 通过路由实现组件的嵌套展示 通过children 属性添加子路由规则
2. 默认子路由 如果children数组中 某个路由规则的path值为空字符串 则这条路由规则 叫做默认子路由

// 父组件
 <!-- 子级路由连接 -->
    <router-link to='/about/tab1'>tab1</router-link>
    <router-link to='/about/tab2'>tab2</router-link>
    <hr>
    <router-view></router-view>

//index.js
import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'

const router =new VueRouter({
  // routes是一个数组 作用 定义 hash地址 与 组件 之间的对应关系
  routes:[
    // 当用户访问/ 的时候 通过redirect属性跳转到/home对应的路由规则
    {path:'/',redirect:'/home'},
    {path:'/home',component:Home},
    {path:'/movie',component:Movie},
    {path:'/about',
    component:About,
    // 打开默认tab1
    redirect:'/about/tab1',
    //子路由规则
    children:[ 
    {path:'tab1',component:Tab1},
    {path:'tab2',component:Tab2},
  ]},
  ]
})

动态路由

1. 动态路由是指：把Hash地址中可变的部分定义为参数项 从而提高路由规则的复用性
2. 在vue-router中使用英文的冒号(:)来定义路由的参数项目
3. 通过this.$route.params.id 可以获取到动态值 this可以省略
4. this.$route 是路由的参数对象 this.#router是路由的导航对象
5. 在hash地址中 /后面的参数项 叫做路径参数 在路由 参数对象中 需要使用this.$route.params来访问路径参数
6. 在hash地址中 ?后面的参数叫做查询参数 在路由参数对象中 需要使用this.$route.query来访问查询参数
7. this.$route中path只是路径部分 fullpath是完整的hash地址

// 在组件中
    <router-link to="/movie/1">逻辑</router-link>
    <router-link to="/movie/2?name=zs age=20">雷神</router-link>
    <router-link to="/movie/3">复联</router-link>



// 在index.js中
 // 需求：在Movie组件中 希望根据id的值 展示对应电影的详情信息
    {path:'/movie/:id',component:Movie},

简化拿参数的方式 使用props

<h3>{{id}}</h3>
// 接收props数据
  props:['id'],
// 开启路由规则的props传参
{path:'/movie/:id',component:Movie,props:true},

导航：声明式导航&编程式导航

1. 在浏览器中 点击连接实现导航的方式 叫做声明式导航

• 普通网页中点击<a>连接 vue项目中点击 <router-link>都属于声明式导航

2. 在浏览器中 调用API方法实现导航 叫做编程式导航

• 普通网页中调用location.href跳转到新页面的方式 属于编程式导航

vue-router中的编程式导航API

1. this.$router.push('hash地址')

• 跳转到指定hash地址 并增加一条历史记录

2. this.$router.replace('hash地址')

• 跳转到指定的hash地址 并替换掉当前的历史记录

3. this.$router.go('数值n')

• go(-1)表示后退一层 如果后退的层数超过上限 则原地不动
• 在实际开发中 一般只会前进或者后退一层页面 因此vue-router提供了如下两个便捷方法
• $router.back() 后退一层
• $router.forward() 前进一层 在行内使用编程式跳转的时候 this必须要省略 否则会报错

导航守卫

导航守卫可以控制路由的访问权限

全局前置守卫

1. 每次发生路由跳转时 都会触发全局前置守卫 因此 在全局前置守卫中 程序员可以对每个路由进行访问权限的控制

// 创建路由实例对象
const router = new VueRouter({...})

// 调用路由实例对象的beforeEach 方法 即可声明 全局前置守卫
// 每次发生路由导航跳转的时候 都会自动触发fn这个 回调函数
router.beforeEach(function(to,from,next ){
  // next()函数表示放行的意思
  next()
})

2.守卫方法的三个形参 从前到后 to,from,next

• to是将要访问的路由的信息对象
• form是将要离开的路由的信息对象
• next 是一个函数 调用next() 表示放行 允许这次路由导航 必须调用next函数 不然不显示组件

next函数的3种调用方式

• 当前用户拥有后台主页的访问权限 直接放行 next()
• 当前用户没有后台主页的访问权限 强制其跳转到登录页面：next('/login')
• 当前用户没有后台主页的访问权限 不允许跳转到后台主页：next(false)

router.beforeEach(function(to,form,next){
  // to 表示将要访问的路由的信息对象
  // form表示将要离开的路由的信息对象
  
  // 1.要拿到用户将要访问的hash地址
  // 2.判断hash地址是否等于/main 
  // 2.1如果等于 /main 证明需要等于之后才能访问成功
  // 2.2 如果不等于 则不需要登录 直接放行
  // 3.如果访问的地址是 /main 则需要读取localStorage中的token的值
  // 3.1 如果有token则放行
  // 3.2 如果没有token 则强制跳转到login登录页面
  if(to.path==='/main'){
    const token=localStorage.getItem('token')
    if(token){
      next() //访问的是后台主页 且有token的值
    }else{
      next('/login') //访问的是后台主页 但是没有token的值 强制返回注册页面
    }
  }else{
    next() //访问的不是后台主页 直接放行
  }
})