vue-router小结

1.什么是vue-router

vue-router是vue.js官方给出的路由解决方案，只能结合vue项目进行使用，能够轻松的管理SPA项目中组件的切换

2.vue-router的用法

先安装vue-router （npm i vue-router）
在新建router/index.js 文件,在文件内导入Vue和vue-router（新建的路径由自己决定）

// 导入Vue和VueRouter的包
// router/index.js文件
import Vue from 'vue'
import VueRouter from 'vue-router'
 
// 调用Vue.use()函数，把VueRouter安装为Vue的插件
Vue.use(VueRouter)
 
const Home = () => import("../home.vue");
 
// 创建路由的实例对象
const router = new VueRouter({
    // routes是一个数组，定义"hash地址"与"组件"之间的关系
    routes:[
        // 重定向属性，当刚打开页面，并没有点击跳转时，则设置首页面渲染
        {path: '/',redirect: '/home'},
        {path: '/home',component: Home}
    ]
})
 
 
// 导出的目的是为了在main.js进行导入, 将路由实例对象挂载在 new Vue()里面
export default router

在组件中vue-router的用法

  // app.vue组件
     
    <template>
        <div>
            // router-link来替代普通的a连接 to为组件路径
            <router-link to='/home'></router-link>
            // 只要在项目中安装和配置了vue-router，就可以使用router-view这个组件
            // 作用 : 占位符，表示渲染的内容的位置
            <router-view></router-view>
        </div>
    </template>

嵌套路由的使用

  import Vue from 'vue'
    import VueRouter from 'vue-router'
     
    Vue.use(VueRouter)
     //懒加载，打包的时候会分离，使用的时候才会加载 可减小js体积
    const Home = () => import('Home.vue')
    const tab = () => import('Tab.vue')
    const router = new VueRouter({
        routes: [
            {
                path: '/home',
                component: Home,
                // 子路由的重定向
                redirec: '/home/tab',
                // 子路由
                children: [
                    // 默认子路由 如果children中的path为空，则这条路由规则，就叫做默认子路由
                    {
                        path: 'tab', // 子路由路径不用加/
                        component: Tab
                    }
                ]
            }
        ]
    })
     
    export default router

    // app.vue组件
     
    <template>
        <div>
            // 路径为子路径，点击后跳转到子路径
            <router-link to='/home/tab'></router-link>
            // 若使用的是默认子路由，则to后面 /tab可以省略
            <router-link to='/home'></router-link>
            <router-view></router-view>
        </div>
    </template>

3.动态路由的使用

// 需求: 在Movie组件中，希望根据id的值，展示对应电影的详情信息
 
// 这里path路径中有参数，可以开启props传参，是为了方便Movie组件拿到参数值
// 在对象中加入props:true
// 如果路径中没有参数，则开启props传参也没有意义
{path: '/movie/:id',component: Movie,props: true}
 
// id的值会存在放Vue实例中的 $route.params.id中
 
// Movie.vue
//则这里就可以直接拿到id的值
props: ['id']

命名路由

import Vue from 'vue'
import VueRouter from 'vue-router'
 
Vue.use(VueRouter)
 
const Home = { template: '<div>This is Home</div>' }
const Foo = { template: '<div>This is Foo</div>' }
const Bar = { template: '<div>This is Bar {{ $route.params.id }}</div>' }
 
const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/foo', name: 'foo', component: Foo },
    { path: '/bar/:id', name: 'bar', component: Bar }
  ]
})
 
new Vue({
  router,
  template: `
    <div id="app">
      <h1>Named Routes</h1>
      <p>Current route name: {{ $route.name }}</p>
      <ul>
        <li><router-link :to="{ name: 'home' }">home</router-link></li>
        <li><router-link :to="{ name: 'foo' }">foo</router-link></li>
        // 若这里是path,则不可以写params，写了不会生效
        <li><router-link :to="{ name: 'bar', params: { id: 123 }}">bar</router-link></li>
      </ul>
      <router-view class="view"></router-view>
    </div>
  `
}).$mount('#app')

多个路由指向同一个组件时，组件内的生命周期钩子不会被调用了，这是因为组件被复用了，如以下代码都是指向Home组件

  const routes = [
      {
        path: '/home',
        component: Home
      },
      {
        path: '/about',
        component: Home
      }
    ]
     
     
    // 使用watch则可以进行监听，对路由参数做出响应
    watch: {
        '$route'(to,from){
          console.log(from)
        }
    }
     
    // 也可以在组件内使用如下
    beforeRouteUpdate(to, from, next) {
        // react to route changes...
        // don't forget to call next()
    }

扩展:

a.在hash地址中，/后面的参数项,叫做’路径参数’,路由中路径参数放在params中

b.在hash地址中，?后面的参数项，叫做”查询参数”，路由中查询参数放在query中

c.在this.$route中，path只是路径部分，不包含查询参数,而fullPath则是完整路径

4.路由守卫

记住参数或查询的改变并不会触发进入/离开的导航守卫(这个是指组件内的beforeRouteEnter)。你可以通过观察 $route 对象(watch)来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。

注意: 如果是全局守卫和组件内的beforeRouteUpdate和beforeRouteLeave在动态路由跳转时也会调用触发守卫

全局前置路由守卫

   // router/index.js
     
    // to是将要访问的路由的对象
    // from 是将要离开的路由的对象
    // next是一个函数,调用next() 表示放行,允许这次路由导航
    router.beforeEach((to,from,next) => {
        next();
    })
     
    // next函数的3中调用方式
    // 当前用户拥有后台主页的访问权限，直接放行 next();
    // 当前用户没有后台主页的访问权限,强制跳转登录页面 next('/login')
    // 当前用户没有后台主页的访问权限,不允许跳转到后台主页  next(false);

使用场景:使用前置路由守卫模拟登录(代码展示)

router.beforeEach((to, from, next) => {
  // 判断要跳转的页面是不是登录页，如果是的话，就直接同意跳转
  
  if (to.path === '/login') {
    return next();
  }
  // 如果不是，则判断浏览器里是否存储了token值，判断登录是否过期，如果不存在token或者过期
   //则强制跳转到登录页重新进行登录
  else if (!localStorage.getItem('token')) {
    return next('/login');
  }
  // 最后则是有token值，则让其正常跳转
  next();
})

以上则是一个模拟登录功能的简单实现，但以上功能还没有完善，只是大概结合全局前置路由守卫进行实现

全局后置钩子

// 不会接受 next 函数也不会改变导航本身：
router.afterEach((to, from) => {
  // ...
})