vue生态——vue-router

vue-router

介绍

1.1vue-router的理解
    vue的一个插件库，专门来实现SPA应用
1.2对SPA的理解
    1.单页web应用
    2.整个应用只有一个页面
    3.点击页面中的导航链接不会刷新页面，只会做页面的局部更新
    4.数据需要通过ajax请求
1.3路由的理解
    1.什么是路由
        1.一个路由就是一组映射关系（key-value）
        2.key为路径，value可能是function或component
    2.路由的分类
        1.后端的路由
            1.理解：value是一个function,用于处理客户端提交的请求
            2.工作过程：服务器收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
        2.前端路由：
            1.理解：value是一个compontent，用于展示页面内容。
            2.工作过程：当浏览器的路径改变时候，对应组件就会显示

1.基本使用

    1.安装vue-router
        npm i vue-router   安装低版本的npm i vue-router@3.2.0 3
    2.应用插件
        Vue.use(VueRouter)
    3.编写router配置项
        //引入VueRouter
        import VueRouter from 'vue-router'
        //引入组件
        import About from '@/compontents/About'
        import Home from '../compontents/Home.vue'
        // 创建一个路由器并暴露一个路由器
        export default  new VueRouter({
            routes:[
                {
                    path:'/about',
                    component:About
                },
                {
                    path:'/Home',
                    component:Home
                }

            ]
        })
    4.实现切换
        <router-link active-class="active" to="/about">About</router-link>
    5.指定展示的位置
        <router-view></router-view>

2.几个注意点

    1.路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹
    2.通过切换，“隐藏”了的路由组件，默认是被销毁的，需要的时候再去挂载
    3.每个组件都有自己的$router属性，里面存储着自己的路由信息
    4.整个应用只有一个router,可以通过$router属性获取到

3.多级路由

    1.配置路由规则，使用children
        routes:[
            {
                path:'/about',
                component:About
            },
            {
                path:'/home',
                component:Home,
                children:[  //通过children配置子级路由
                    {
                        path:'message',  //此处一定不要写：/message
                        component:Message,  
                    },
                    {
                        path:'new',     //此处一定不要写：/news
                        component:New,  
                    }
                ]
            }

        ]
    2.跳转（要写完整路径）
        <router-link to="/home/message">message</router-link>

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/message/detail',
                query:{
                    id:m.id,
                    title:m.title
                }
            }">
                {{m.title}}
            </router-link>
    2.接收参数
        $router.query.id
        $router.query.title

5.命名路由

    1.作用：可以简化路由的跳转
    2.如何使用
        1.给路由命名
            {
                path:'/demo',
                component:Demo,
                children:[
                    {
                        path:'test',
                        component:Test,
                        children:[
                            name:'hello', //给路由命名
                            path:'welcome',
                            component:Hello
                        ]
                    }
                ]
            }
        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参数
     routes:[
        {
            name:'guanyu', //路由命名
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'message',
                    component:Message,
                    children:[
                        {    
                            name:'xiangqing', //路由命名
                            path:'detail/:id/:title',  //使用占位符声明接收params参数
                            component:Detail
                        }
                    ]  
                },
                {
                    path:'new',
                    component:New,  
                }
            ]
        }

    ]
    2.传递参数
        <!-- 跳转路由并携带params参数，to的字符串写法 -->
        <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>
        <!-- 跳转路由并携带params参数，to的对象写法 -->
          <router-link 
          :to="{
              // path:'/home/message/detail', //params不能利用path跳转
              name:'xiangqing',   //利用name跳转
              params:{
                  id:m.id,
                  title:m.title
              }
          }">
            {{m.title}}
        </router-link>
    3.接收参数
        $route.params.id
        $route.params.title

7.路由组件的props配置

    作用让路由组件更方便的收到参数
        {    
            name:'xiangqing', //路由命名
            path:'detail/:id/:title',
            component:Detail,
            // props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给detail组件
             props:{a:1,b:2}，
            // props的第二种写法, 值为布尔值，若布尔值为真，就会把该路由组件受到的所有params参数。以props的形式detail组件
             props:true

            // props的第三种写法，值为函数
             props($route){
                 return {id:$route.params.id,title:$route.params.title}
             }
            // 利用解构赋值   连续解构赋值
            props({params:{id,title}}){
                return {id,title}
            }
        }

8.的replace属性

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

9.编程式路由导航

    //$router的两个API
    this.$router.push({         
        name:'xiangqing',   //利用name跳转
        params:{
            id:m.id,
             title:m.title
         }
    })

    replaceShow(m){
        this.$router.replace({
              name:'xiangqing',   //利用name跳转
              params:{
                  id:m.id,
                  title:m.title
              }
        })
    }

    this.$router.back()  //控制路由的前进
    this.$router.forward() //控制路由的后退
    this.$router.go(x) //可前进也可后退  x为正  前进x步  x为负  后退x步

10.缓存路由组件

    1.作用：让展示的路由组件保持挂载，不被销毁
    具体编码
         <!-- 让组件切换时候不被销毁 include指定不被销毁的组件-->
        <keep-alive include="New">
            <router-view></router-view>
        </keep-alive>
        <!-- 多个 -->
        <keep-alive :include="['News,Message']">
            <router-view></router-view>
        </keep-alive>

11.两个声明周期钩子

    1.作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态
    2.具体的名字
        1.activated路由组件被激活时触发
        2.deactivated路由组件失活时触发

12.路由守卫

    1.作用:对路由进行权限控制
    2.分类:全局守卫、独享守卫、组件内守卫
    3.全局守卫:
        // 全局前置路由守卫 ---初始化或者每次路由切换之前被调用
        router.beforeEach((to,from,next)=>{
            // 通过路由校验
            // if(to.path === '/home/new' || to.path ==='/home/message' ){
            // 通过路由属性校验
            if(to.meta.isAuth ){
                if(localStorage.getItem('school')==='xinghuo1'){
                    next()
                }else{
                    console.log("认证失败");
                }
                
            }else{
                next()
            } 
        })
        
        // 后置路由守卫 ---初始化或者每次路由切换之后被调用
        router.afterEach( (to,from) => {
            if(to.meta.title){
                doucument.title = to.meta.title  //修改网页title
            }else{
                doucument.title = 'vue-test'
            }
            
        })
    4.独享路由守卫
    写在路由中的属性
        beforeEnter:(to,from,next)=>{
            if (localStorage.getItem('school')==='xinghuo') {
                next()
            }else{
                console.log("权限不够");
            }

        }
    5.组件内守卫
        // 通过路由规则，进入组件时候被调用
        beforeRouteEnter (to, from, next) {
        
        }
        },
        // 通过路由规则，离开组件时被调用
        beforeRouteLeave (to, from, next) {
            
        }

13.路由工作的两种工作模式

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

    解决history模式下404问题
        npm install --save connect-history-api-fallback
        在app.use(express.static(__dirname+'/static/dist')) 之前
            引入    var history = require('connect-history-api-fallback');
            使用    app.use(history())