Vue-Router路由管理器

1.介绍

vue-router是vue的一个插件，用来提供路由功能。
通过路由的改变可以动态加载组件，达到开发单页面程序的目的。
在html文件中使用时需要引入vueRouter(先引入vue.js,在引入vueRouter)

2.基本使用

1)声明组件

 let com1 = {template:`<div>this is com1</div>`}
 let com2 = {template:`<div>this is com2</div>`}
 let com3 = {template:`<div>this is com3</div>`}

2)声明路由器
route路由对象 router路由器对象 routes路由对象组
路由命名：在配置路由的时候，为路由指定name属性，方便后期的路由跳转
重定向：用户访问/a时，URL会被替换成/b，然后匹配路由为/b
别名：/a 的别名是 /A，意味着，当用户访问 /A 时，URL 会保持为 /，但是路由匹配则为 /a，就像用户访问 /a 一样 (注意：别名是路径path的别名)

let router = new VueRouter({
    routes: [
      { 
        path: '/a',     // 路由地址
        component: com1,// 对应组件
        name: 'comA',   // 给路由设置名字，方便使用name进行跳转
        redirect: '/c', // 重定向
        alias: '/coma', // 别名
      },
      { path: '/b', component: com2 },
      { path: '/c', component: com3 },
    ]
  })

3)路由注册
在vue的根实例中，注册路由

  let vm = new Vue({
    el: '#app',
 // 将路由实例对象导入vue实例，相当于router:router,在此使用简写形式
    router: router
  })

4)路由使用

//router-link的本质是创建a标签
<router-link to="/a">A组件</router-link>
<router-link to="/b">B组件</router-link>
<router-link to="/c">C组件</router-link>
// 路由视口，用来加载路由对应的组件
<router-view></router-view>

3.动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。
1)声明

   let router = new VueRouter({
        routes: [
          // 动态路由参数以冒号开头 
          { path: '/user/:username/:id', component:com1 }
        ]
      })
      <router-link to="/user/zhangsan/1001"></router-link>

2)获取路由携带参数（参数值会被设置到 this.$route.params中）
/user/zhangsan/1001和/user/lisi/1002都将映射同一个组件
在一个组件内部发生动态路由变化时，vue组件实例会被复用，而不会重新销毁再创建
组件内部发生动态路由变化，想要监听路由参数变化时，可以使用watch监听$route,或者使用组件内部的导航守卫

  let com1 = {
    data() {
      return {
        id: null,
        username: null
      }
    },
    template: ``,
    created() {
      // 在created钩子函数中，只能一次性获取携带的参数，不能够持续获取
      this.id = this.$route.params.id;
      this.username = this.$route.params.username;
    },
    watch() {
      // 使用watch监听器，可以持续监听路由器对象中，携带参数的变化
      $route(to, from) {
        this.id = to.params.id;
        this.username = to.params.username;
      }
    }
  }

4.嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件

最外层<router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套
<router-view>。要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置

品字形布局：上面头部，左侧导航栏，右侧内容区域
嵌套路由的定义(children属性中定义子路由)

 let router = new VueRouter({
    routes: [
      {
        path: '/student',
        component: comStu,
        children: [
          { path: 'grade', component: comGrade },
          { path: 'register', component: comRegister },
        ]
      }
    ]
  }) 
   //使用
      一级路由对应一个router-view
      二级路由对应一个router-view

5. 编程式导航

除了使用 <router-link> 创建 a 标签来定义导航链接，还可以借助 router
的实例方法，通过编写代码来实现。this.$router.push()跳转到指定路由，会向history栈添加一个新的记录，当用户点击浏览器回退按钮的时候，可以回到跳转前的url。

1)this.$router.push() // 在history历史栈中新增一条记录
路径跳转：this.$router.push({ path: '/a' })
名字跳转:this.$router.push({ name: 'comA' })
路由跳转并携带参数

//路径path跳转和query搭配使用
this.$router.push({ path: '/a', query: { username: 'zhangsan' } })
//名字name跳转和params搭配使用
this.$router.push({ name: 'comA', params: { age: 12 } })

参数获取
在跳转的目标组件中，只要能够访问到$route就能拿到跳转携带的参数
例如：在目标组件的created()中

 created(){
      console.log(this.$route.params)
      console.log(this.$route.query)
    }

query传参和params传参区别

1.query传参参数保存在url地址栏中，以查询字符串的形式拼接上去
2.安全性来讲，params比较安全，query会显示在地址栏中，容易造成数据泄露
3.刷新页面时，query中的数据不受影响，而params中的数据直接消失(params传递的为一次性参数)

2)this.$router.replace() 这个方法的参数是一个整数,直接替换当前路由，不会产生新的历史记录
3)this.$router.go() 内部接受正值或负值的整数作为参数，正数就是前进，负数就是后退（在历史记录中）

6.路由模式

1)修改路由模式

let router = new VueRouter({
    // mode: 'hash',
    mode: 'history',  // mode属性修改路由模式,默认为hash模式
    routes: []
  })

hash路由和history路由的区别：

1.hash路由在地址栏URL上有#，而history路由没有#，并且更精简
2.进行回车刷新操作，hash路由会加载到地址栏对应的页面，而history路由一般就404报错了
（刷新是网络请求，history路由需要后端支持）。
3.hash路由支持低版本的浏览器，而history路由是HTML5新增的API。
4.hash的特点在于它虽然出现在了URL中，但是不包括在http请求中，所以对于后端是没有一点影响的, 所以改变hash不会重新加载页面，所以这也是单页面应用的必备。
5.history运用了浏览器的历史记录栈，之前有back,forward,go方法，之后在HTML5中新增了pushState（）和replaceState（）方法（需要特定浏览器的支持），它们提供了对历史记录进行修改的功能，不过在进行修改时，虽然改变了当前的URL，但是浏览器不会马上向后端发送请求。

7.导航守卫 --路由的改变会触发导航守卫

介绍
正如其名，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
每个守卫方法接收三个参数(to,from,next)：
to: Route 即将要进入的目标 路由对象
from: Route 当前导航正要离开的路由
next: Function 一定要调用该方法来 resolve 这个钩子，让路由跳转继续进行

next(): 进行管道中的下一个钩子（继续完成导航跳转）
next(false): 中断当前的导航。
next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。

守卫是异步解析执行，导航在所有守卫 resolve 完之前一直处于等待中。

守卫类型
1.全局守卫
路由的改变会触发导航守卫
全局守卫有全局前置守卫、全局后置守卫。
守卫全局路由对象，任何地方发生路由跳转或更新都能检测到

let router = new VueRouter({
    routes: [
        {}
    ]
})
// 全局前置守卫
router.beforeEach((to, from, next) => {
    //.......拦截操作
    //继续向下执行
    next();
    // next(false); 
})
// 全局后置守卫
router.afterEach((to, from) => {
    //.......之后操作
})

2.路由独享守卫
守卫某个路由记录

  let router = new VueRouter({
        routes: [
          { 
            path: '/a', 
            component: com1,
            beforeEnter(to, from, next) {
              .......拦截操作
              //继续向下执行
              next();
            }
          }
        ]
      })

3.组件内守卫
守卫某个组件

let com1 = {
    data() {
        return {}
    },
    template: ``,
    // 组件内部前置守卫；进入当前组件之前拦截
    beforeRouteEnter(to, from, next) {
        //.......拦截操作
        //手动调用next()方法确保路由跳转继续执行
        next();
    },
    // 组件内部更新守卫；在当前组件中，路由发生改变时触发
    beforeRouteUpdate(to, from, next) {
        //.......拦截操作
        //手动调用next()方法确保路由跳转继续执行
        next();
    },
    // 组件内部后置守卫；离开当前组件之前，触发
    beforeRouteLeave(to, from, next) {
        //.......拦截操作
        //手动调用next()方法确保路由跳转继续执行
        next();
    }
}