Vue.js学习笔记-路由及其守卫

路由

    1、理解：一个路由（router）就是一组映射关系（key-value），多个路由需要路由器（router）进行管理。
    2、前端路由：key是路径，value是组价
1、基本使用
    1、安装vue-router，命令：npm i vue-router
    2、应用插件：Vue.use(VueRouter)
    3、编写router配置项
        // 该文件专门用于创建这个应用的路由器
        import VueRouter  from "vue-router";
        // 引入组件
        import Home from "../component/Home.vue";
        import About from "../component/About.vue";

        // 创建并暴露一个路由器
        export default new VueRouter({
            routes:[
                {
                    path:'/about',
                    component:About
                },
                {
                    path:'/home',
                    component:Home
                },
            ]
        })

    4、实现切换（active-calss可配置高亮样式）
    <router-link active-class="active" to="/about">About</router-link>

    5、指定展示位置
    <router-view></router-view>
2、几个注意点
    1、路由组件通常存放在pages文件夹，一般组件通常存放在component文件夹
    2、通过切换，“隐藏”了路由组件，默认是被销毁掉的，需要的时候再去挂载
    3、每个组件都有自己的$route属性，里面存储着自己的路由信息
    4、整个应用只有一个router，可以通过组件的$router属性获取到
3、多级路由（嵌套路由）
    1、配置路由规则，使用children配置项
        routes:[
            {
                path:'/about',
                component:About,
            },{
                path:'/home',
                component:Home,
                children[
                    //通过children配置子级路由
                    {
                        path:'new',
                        component:News
                    },{
                        path:"message",
                        component:Message
                    }
                ]
            }
        ]
    
4、路由的query参数
    1、传递参数
    <!-- 跳转路由并携带query参数，to的字符串写法 -->
    <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link> -->


    <!-- 跳转路由并携带query参数，to的对象写法 -->
    <router-link :to="{path:'/home/messagsdetail',query:{
            id:m.id,
            title:m.title
        }
    }">{{m.title}}</router-link>
    2、接受参数
    $route.query.id
    $route.query.title

5、命名路由
    1、作用：可以简化路由的跳转
    2、如何使用
        1、给路由命名:
        path:'/home',
        component:Home,
        children:[
            {
                name:'xiaoxi',
                path:'news',
                component:News,
            },{
                path:'message',
                component:Message,
                children:[
                    {
                        name:"xiangqing",
                        path:'detail',
                        component:Detail
                    }
                ]
            }
        ]
    2、简化跳转
    <!-- 简化前，需要写完整的路径 -->
    <router-link to="/demo/test/welcome">跳转</router-link>

    <!-- 简化后，直接通过名字跳转 -->
    <router-link to="{name:hello}">跳转</router-link>

    <!-- 简化写法配合传递参数 -->
    <router-link :to="{
        name:'hello',
        query:{
            id:666,
            title:'你好'
        }
    }">跳转</router-link>

6、路由的params参数
    1、配置路由，声明接受params参数
        {
            path:'/home',
            component:Home,
            children:[{
                path:'news',
                component:News,
            },{
                component:Message,
                children:[
                    {
                        name:'xiangqing',
                        path:'detail/:id/:title' //使用占位符声明接受params参数
                        component:Detail
                    }
                ]
            }
        ]
    }

    2、传递参数
        <!-- 跳转并携带params参数，to的字符串写法 -->
        <router-link :to="/home/message/detail/666/你好啊">跳转</router-link>

        <!-- 跳转并携带params参数，to的对象写法 -->
        <router-link to:="{
            name:'xiangqing',
            params:{
                id:666,
                title:'你好'
            }
        }>跳转</router-link>
    特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置

    3、接受参数
        $router.params.id
        $router.params.title

7、路由的props配置
    作用：让路由组件更方便的收到参数
     {
        name:"xiangqing",
        path:'detail',
        component:Detail,
        // props的第一种写法，值为对象,该对象中的所有key-value都会以props形式传给Detail组件
        // props:{a:1,b:"hello"},

        // props的第二种写法,值为布尔值,若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
        // props:true

        // props的第三种写法，值为函数，
         props($route){
             return {
                id:$route.query.id,
                title:$route.query.title
            }
        }
    }

8、<route-link>的replace属性
    1、作用：控制路由跳转时操作浏览器历史记录的模式
    2、浏览器的历史记录有两种写入方式：分别是push和replace，push是追加历史纪录，replace是替换当前记录，路由跳转默认为push
    3、如何开启replace模式：<router-link replace ......>News<router-link>

9、编程式路由导航
    1、作用：不借助<router-link>实现路由跳转，，让路由跳转更加灵活
    2、具体编码
    //$router的两个api
    this.$router.push({
        name:'xiangqing',
            params:{
                id:xxx,
                title:xxx
            }
    }}

    this.$router.replace({
        name:'xiangqing',
            params:{
                id:xxx,
                title:xxx
            }
    })
    this.$router.forward()//前进
    this.$router.back()//后退
    this.$router.go()//可前进也可后退

10、缓存路由组件
    1、作用：让不展示的路由组建保持挂载，不被销毁
    2、具体编码:
        <keep-alive include="News">
            <router-view></router-view>
        <keep-alive>

11、两个新的生命周期钩子
    1、作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态
    2、具体名字:
        1、actived 路由组价被激活时触发
        2、deactived 路由组件失活时触发

​ 12、路由守卫
1、作用：对路由进行权限控制
2、分类：全局守卫、独享守卫、组件内守卫
3、全局守卫：

// 全局前置路由守卫 – 每次路由器切换之前/初始化时候被调用
router.beforeEach((to, from, next) => {
if(to.path===’/home/news’||to.path==="/home/message"){
if(localStorage.getItem(‘school’)===‘huainanshifanxueyuan’){
next()
}else{
alert(‘学校名不对，无权限访问！’)
}
}else{
next()
}

            // 全局后置路由守卫 -- 每次路由器切换之后/初始化时候被调用
            router.afterEach((to,from)=>{
                if(to.meta.title){
                    document.title = to.meta.title
                }else{
                    document.title = "vue-test"
                }
            })


13、路由器的两种工作模式
    1、对于一个url来说，什么是hash值？---#及后面的内容就是hash值
    2、hash值不会包含在HTTP请求中，即hash值不会带给服务器
    3、hash模式：
        1、地址中永远带着#号，不美观
        2、若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记不合法
        3、兼容性较好
    4、history模式
        1、地址干净，美观
        2、兼容性和hash模式相比略差
        3、应用部署上线时需要后端人员支持，解决刷新页面服务端404问题