Vue 路由的一些复杂配置

# 一、路由的props参数
    export default new VueRouter({
        routes:[
        {
            name:'guanyu', // 命名路由
            path:'/about', // 路劲
            component: About
        },
        {
            path:'/home',
            component: Home,
            children:[
                {
                    path:'messages',
                    component: Messages,
                    children:[
                        {
                            name: 'xiangqing',
                            path: 'message/:id/:title', // params传参
                            component: MessageInfo,
                            // props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传值给MessageInfo组件。
                            // props: {a:1,b:'hello'},

                            // props的第二种写法，值为bool值，为true，就会把该路由组件收到的参数，以props的形式传值给MessageInfo组件。
                            props: true,

                            // props的第三种写法，值为函数
                            // props($route){
                            //     return {
                            //         id: $route.query.id,
                            //         title: $route.query.title,
                            //         a: 1,
                            //         b: 'hello'
                            //     }
                            // }
                        }
                    ]
                },
                {
                    path:'news',
                    component: News
                }
            ]
        }
        ]
    });

# 二、<router-link>的replace属性
#    1.作用：控制路由跳转时操作浏览器历史记录的前进后退模式
#    2.浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录，路由跳转默认是push。
#    3.如何开启replace模式：
        <router-link replace ...>...</router-link>
        
# 三、编程式路由导航
    1.作用：不借助<router-link>实现路由跳转，让路由跳转更灵活
    2.具体编码：
        this.$router.push({  // 留痕迹在window.history
            name: 'xxx',
            params: {id:xxx,title:'xxx'}
        });
        this.$router.replace({// 不留痕迹在window.history
            name: 'xxx',
            params: {id:xxx,title:'xxx'}
        });
        this.$router.forward(); // 前进，等于window.history.forward()
        this.$router.back(); // 后退，等于window.history.back()
        this.$router.go(-2); // 可前进可后退，等于window.history.back()
        
# 四、缓存路由组件
    1.作用：让不展示的路由组件保持挂载，不被销毁
    2.具体编码：<keep-alive include="News,Meaasges"><router-view></router-view></keep-alive>
    注意：被<keep-alive>包含的内容会保持挂载不被销毁，include可以指定哪些组件不被销毁，它的值是组件名(也就是组件的name属性值)，不填include代表所有都不销毁
        
# 五、两个新的声明周期钩子：activated、deactivated
    1.作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态
    2.具体名字：activated路由组件被激活时触发，deactivated路由组件失去激活时触发
    
# 六、全局守卫路由
    # 1.全局前置路由守卫——初始化的时候被调用、每次路由切换之前被调用
        router.beforeEach((to, from, next)=>{
            console.log('beforeEach', to, from);
            // if (to.name === 'xinwen' || to.path === '/home/messages'){  // 这里要是有十几二十个的话，就会显得累赘
            if (to.meta.isAuth){ // 路由的meta属性对象，是专门供我们自定义属性使用的（注意：自定义属性放在其他地方不会生效）
            if (localStorage.getItem('school')==='BaiYeShu'){
                next();// 放行
                console.log('@');
            }else{
                alert('学校名不对！')
            }
            }else{
            next();
            }
        });
    # 2.全局后置路由守卫——初始化的时候被调用、每次路由切换之后被调用
        router.afterEach((to, from)=>{
            console.log('afterEach', to, from);
            if (to.meta.title){
            document.title = to.meta.title
            }else{
            document.title = 'vue_test'
            }
            
        });
        export default router;
    # 3.独享路由（配置在路由内部）
        {
                    path:'news',
                    component: News,
                    meta:{isAuth: true, title: '新闻'}, // 路由的meta属性对象
                    beforeEnter(to, from, next){  // 这就是独享路由，内容参数和beforeEach没区别
                        console.log('beforeEnter', to, from);
                        // if (to.name === 'xinwen' || to.path === '/home/messages'){  // 这里要是有十几二十个的话，就会显得累赘
                        if (to.meta.isAuth){ 
                            if (localStorage.getItem('school')==='BaiYeShu'){
                                next();// 放行
                                console.log('@');
                            }else{
                                alert('学校名不对！')
                            }
                        }else{
                            next();
                        }
                    }
                }
    # 4.组件内部路由守卫（写在组件内部的回调）
        // 通过路由规则，进入该组件时被调用
        beforeRouteEnter(to, from, next) {
            console.log('beforeRouteEnter');
            next();// 放行
        },
        // 通过路由规则，离开组件时被调用
        afterRouterLeave(to, from, next) {
            console.log('afterRouterLeave');
            next();// 放行
        }