路由的注册与使用

引入Vue实例和Vue-router，并且应用路由插件

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// Vue.use应用了插件上的install方法

路由配置

生成路由实例

const router = new VueRouter({配置项})

配置项

const router = new VueRouter({
   mode:'history', // 选择路由模式（hash/history）
   base:'xxx'，  // 客户端基础地址
   routes   // 引入配置项
})

const routes = [
  {
    // 路由规则
    path: '/',
    name: 'home',    // 命名路由  给当前的路由起一个名称
    component: () => import('../views/HomeView.vue'),// 懒加载的方式引入组件
    meta: {// 路由元信息 -- 页面传参的方式，对于当前的规则进行描述,权限描述
      data: '你好' 
    }
  },
  {
    path: '/news',
    component: () => import('../views/newsView.vue'),
    children: [  // chidren项中的是/news下面的嵌套子路由，子路由前面不加'/'
      {
        
        path: ':id',// 动态路由参数的定义,必须要先定义后,使用
        component: () => import('../views/detail.vue'),
        props: true   // 利用props传值，对应组件通过props中的对应属性获取
      }
    ]
  },
  {

    path: '/detail/:id',    // 动态路由参数的定义,必须要先定义后使用
    component: () => import('../views/detail.vue'),
    // 可以通过props,隐式传递数据
    /* props: router => {
      return { username: 'admin' }
    } */
    // 写boolean类型,可以方便我们去读取动态路由参数 通过 props来接受
    props: true
  },
  {
    path: '/admin',
    component: () => import('../views/admin.vue'),
    beforeEnter(to, from, next) {  // 路由独享前置守卫
      console.log('路由独享 -- beforeEnter')
      next()
    },
    // 重定向，将路由跳转到响应的路由
    // redirect: '/admin/welcome',
    children: [
      {
        // /admin/welcome
        path: 'welcome',
        component: () => import('../views/welcome.vue')
      }
    ]
  },
  {
    path: '*',    // 404页面，当路由表中的地址都无法匹配将会匹配这里的内容
    component: () => import('../views/notfound.vue')
  }
]

实例的导出及应用

export default router

在根组件中

new Vue({
  router,  // this.$route this.$router
  store,   // this.$store 在这里进行添加出来的属性
  render: h => h(App)
}).$mount('#app')

路由视图与导航

路由注册后将会产生Router-link,Router-view两组标签

<template>
  <div id="app">
    <nav v-if="show">
      <!-- 声明式导航 -->
      <router-link to="/">Home</router-link> <router-link to="/about">About</router-link>
      <router-link to="/news">news</router-link>
    </nav>
    <!-- 挂载点,路由匹配成功后,渲染的节点 -->
    <router-view />
  </div>
</template>

$route和$ router

使用$router可以进行路由的跳转,router为 VueRouter 实例,跳转到不同url，router.push方法

this.$router.push( )
this.$router.go( )
this.$router.replace( )
this.$router.back

$route

当 $route进行路由参数的接收，监听$ route不需要深度监听，当路由切换时，vue-route会重新创建$route对象，而不是更改内部数据

this.$route.query.xxx

this.$route.params.xx // 这里取的键名是根据在路由表中配置的键名

在路由表中配置props=true,将路径参数传入组件的属性中，但是并不能处理query参数

组件定义props:["xx"]将参数注入到组件的属性中

路由守卫

全局路由守卫

全局前置守卫 => router.beforeEach

全局的路由发生切换时执行

// next参考洋葱模型
router.beforeEach((to, from, next) => {
    // to:切换到的路径 from：发生切换的路径
  console.log('全局前置守卫')
  next() // 只有执行next方法才会往下渲染路由页面，可以在此进行响应的逻辑判断
})

全局解析守卫 => router.beforeResolve

当所有独享和组件守卫执行完毕后才会执行

router.beforeResolve((to, from, next) => {
  console.log('全局解析守卫')
  next()
})

全局后置钩子 => router.afterEach

router.afterEach((to, from) => {
  console.log('全局后置守卫')
})

路由独享守卫 => beforeEnter

可以在对应路由的路由表配置项中直接进行定义，当进入路由的时候触发相应的回调。

  {
    path: '/admin',
    component: () => import('../views/admin.vue'),
    beforeEnter(to, from, next) {
      console.log('路由独享守卫')
      next()
    },

组件守卫

组件前置守卫 => beforeRouteEnter

export default {
    beforeRouteEnter(to, from, next) {
    console.log('组件前置守卫')
    next()
  }
}

路由变化守卫 => beforeRouteUpdate

  // 动态路由参数，切换时才会触发
  beforeRouteUpdate(to,from,next){
    console.log('组件 -- beforeRouteUpdate',this.id);
    next()
  }

路由后置守卫 => beforeRouteLeave

  //早于生命周期的销毁阶段之前执行
  beforeRouteLeave(to, from, next) {
    console.log('组件内 -- beforeRouteLeave')
    next()
  }

总结

拥有next方法的守卫只有在执行的最后使用next()方法路由才会匹配执行，否则不会渲染。
可以使用watch监听'$route.path'查看路由变化
守卫的执行顺序：全局守卫>独享守卫>解析守卫
所有的守卫都可以多次调用，统一执行
守卫和生命周期执行顺序：

进入：全局前置>组件前置>生命周期创建阶段

离开：组件后置>全局后置>生命周期销毁阶段

未完待续..........

Vue-Router