Vue-Router路由管理器

路由机制

介绍

vue-router是vue的一个插件，用来提供路由功能。
通过路由的改变可以动态加载组件，达到开发单页面程序的目的。

vue-router使用步骤

1)创建路由组件
2）配置路由映射：组件和路径映射关系
3）使用路由：通过<router-link>和<router-view>

基本使用

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)定义路由
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: '/b', // 重定向
            alias: '/A', // 别名
          },
          { path: '/b', component: com2 },
          { path: '/c', component: com3 },
        ]
      })

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

let vm = new Vue({
	el: '#app',
	router
})

4）使用路由

<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>

动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件，一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 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;
        }
    }
}

嵌套路由

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

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

编程式导航

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() 内部接受正值或负值的整数作为参数，正数就是前进，负数就是后退（在历史记录中）

路由模式

修改路由模式：

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不会重新加载页面，所以这也是单页面应用的必备。

导航守卫

介绍

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

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

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

守卫类型

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

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

2.全局守卫
守卫全局路由对象，任何地方发生路由跳转或更新都能检测到

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

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

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