Vue组件：Vue Router以及路由守卫，含路由的基本使用，配置，路由传参，导航方式，缓存；路由守卫的三种用法

Vue Router

vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。点击页面的导航链接时，不会刷新页面，只会局部更新

基础使用

使用步骤:

1. 安装vue-router，命令

   npm i [email protected]
   

2. 在src同级目录下创建router目录，并创建路由的js配置文件,index.js

3. 创建组件（多个）

   Home组件

   About组件

4. 编写路由的配置文件index.js

   '/'：默认展示页面

   // 1.引入路由的核心库
   import VueRouter from "vue-router";
   // 2.引入要被路由的组件
   import Home from "@/components/Home";
   import About from "@/components/About";
   
   //  3.创建并暴露路由
   export default new VueRouter({
       routes:[
           {
               path:'/', 
               component:Home
           },
           {
               path:'/about',
               component:About
           },
         	{
               path:'/home',
               component:Home
           }
   })
   

5. 在main.js配置路由

   import Vue from 'vue'
   import App from './App.vue'
   // 引入路由核心库
   import VueRouter from "vue-router";
   // 引入路由配置文件
   import router from './router/index';
   
   Vue.config.productionTip = false
   Vue.use(VueRouter)
   
   new Vue({
     render: h => h(App),
     router   // vue加载路由
   }).$mount('#app')
   

6. 在App.vue中注册组件，并使用

多级路由

组件中包含组件，形成组件之间的嵌套，路由之间形成层级关系

1. 创建组件,eg：News组件和Message组件

   News组件：

   Message组件：

2. 更改路由组件的配置，在父组件的路由下配置子组件路由

   注意：二级路径不加/

   // 引入路由的核心库
   import VueRouter from "vue-router";
   // 引入要被路由的组件
   import Home from "@/components/Home";
   import About from "@/components/About";
   import News from "@/components/News";
   import Message from "@/components/Message";
   import Detial from "@/components/Detail";
   
   //  创建并暴露路由
   export default new VueRouter({
       routes:[
           {
               path:'/',
               component:Home
           },
           {
               path:'/about',
               component:About
           },
           {
               path:'/home',
               component:Home,
               children:[
                   {
                       path:'news', /* 二级路径不写/ */
                       component:News
                   },
                   {
                       path:'message',
                       component:Message
                   }
               ]
           }
       ]
   })
   

3. 父组件中展示内容，父组件Home

   多级路由跳转要写全路径

路由组件传参

加入现在Message组件要给它的子组件Detail组件传参

1. 路由配置文件中配置

   // 引入路由的核心库
   import VueRouter from "vue-router";
   // 引入要被路由的组件
   import Home from "@/components/Home";
   import About from "@/components/About";
   import News from "@/components/News";
   import Message from "@/components/Message";
   import Detial from "@/components/Detail";
   
   //  创建并暴露路由
   export default new VueRouter({
       routes:[
           {
               path:'/',
               component:Home
           },
           {
               path:'/about',
               component:About
           },
           {
               path:'/home',
               component:Home,
               children:[
                   {
                       path:'news', /* 二级路径不写/ */
                       component:News
                   },
                   {
                       path:'message',
                       component:Message,
                       children:[
                           {
                               path:'detail',
                               component:Detial
                           }
                       ]
                   }
               ]
           }
       ]
   })
   

2. Message组件传递

   方式1：

   使用模板字符串，并且给to属性添加:，拼接url，${}的形式带参

   方式2：

   改为对象形式的传参

3. Detail子组件中接收数据

   使用$route属性，因为参数在url中所以要使用query，再.上参名即可传参

命名路由

跳转时路径较长，使用命名路由简化跳转路径

实现步骤：

1. 在路由配置中，给路由添加一个name属性，index.js

   例如上述案例中给Detail组件添加一个命名路由，detail的路由配置如下

   {
     path:'message',
       component:Message,
         children:[
           {
             path:'detail',
             name:'xq',   // 添加命名
             component:Detial
           }
         ]
   }
   

2. 组件使用对象形式的跳转

   使用name属性进行跳转

路由的params参数

作用：路由之间进行参数传递，因此url中的参数名

实现步骤：

1. 在路由配置中添加占位符，index.js中

   {
     path:'message',
       component:Message,
         children:[
           {
             path:'detail/:id/:title',
             name:'xq',
             component:Detial
           }
         ]
   }
   

   给path添加占位符，:参数名

2. 改变传参对象，query传参改为params传参，Message组件

   使用params传参

   情况1：对象形式

   情况2：字符串形式路径

    {{msg.title}}
   
   

3. 改变数据接收，query接收改为params接收，Detail组件

   使用params接收

props配置

作用：简化接收参数

实现步骤：

1. 路由配置中配置props属性

   方式一：固定值方式

   props:{id:xxx,titel:...}
   

   方式二：启用方式

   {
     path:'message',
       component:Message,
         children:[
           {
             path:'detail/:id/:title',
             name:'xq',
             component:Detial,
             props:true   //	启用方式
           }
         ]
   }
   

   方式三：决定来源的方式

   {
     path:'message',
       component:Message,
         children:[
           {
             path:'detail/:id/:title',
             name:'xq',
             component:Detial,
             props($route){
               return {
                 id : $route.params.id,  //params/query  取决于来源于哪
                 title : $route.params.title
               }
             }
           }
         ]
   }
   

2. 传参组件中params传参

   
     {{msg.title}}
   
   

3. 接收组件中添加props接收，通过插值表达式使用

浏览器历史记录的两种写入模式

在Home组件中添加前进后退按钮

在Message组件中添加模式

    {{msg.title}}

1. push：追加历史记录

   记录历史记录，一步一步回退

2. replace：替换当前历史记录

   不保留历史记录，直接退回上个路由

导航方式

1. 声明式

   上例中浏览器的写入模式演示的就是声明式的导航方式

   
   
       {{msg.title}}
   
   

2. 编程式

   编程式绑定事件，传参通过()方式传递，方法中可以采用push或replace方式，方法中给一个配置对象，跳转地址，参数等

缓存

1. News组件中有输入框

2. Message组件有输入框

3. 想要输入框的输入内容在跳转组件之后仍存在，需要给Home.vue父组件添加缓存

   用标签包裹

   指定组件缓存：include="指定缓存组件的组件名"

   指定多组件缓存：:include="['组件名','组件名'...]"

在缓存的组件中添加缓存激活/失活生命周期函数

激活状态：activated(){}

失活状态：deactivated(){}

eg：News组件

路由守卫

类似于过滤器的作用

全局路由守卫

全局路由守卫 ：全部的路由都会执行

1. 前置路由守卫

   路由配置文件中配置路由守卫，将创建路由对象，并配置路由守卫，最后将路由对象暴露

   // 引入路由的核心库
   import VueRouter from "vue-router";
   // 引入要被路由的组件
   import Home from "@/components/Home";
   import About from "@/components/About";
   import News from "@/components/News";
   import Message from "@/components/Message";
   import Detial from "@/components/Detail";
   
   //  创建并暴露路由
   const router =  new VueRouter({
       routes:[
           {
               path:'/',
               component:Home
           },
           {
               path:'/about',
               component:About
           },
           {
               path:'/home',
               component:Home,
               children:[
                   {
                       path:'news', /* 二级路径不写/ */
                       component:News
                   },
                   {
                       path:'message',
                       component:Message,
                       children:[
                           {
                               path:'detail/:id/:title',
                               name:'xq',
                               component:Detial,
                               props:true
                           }
                       ]
                   }
               ]
           }
       ]
   })
   
   // 全局路由守卫 
   // 1.前置路由守卫
   // 箭头函数三个参数，to:去哪里 from:从哪里来  next:执行next()才放行，不执行则拦截
   router.beforeEach((to, from, next)=>{
       console.log(to,from);
       next();
   })
   export default router;
   

2. 后置路由守卫

   // 2.后置路由首位
   // 箭头函数两个参数，to:去往哪里  from:从哪里来
   router.afterEach((to, from)=>{
       console.log(to);
       console.log(from);
   })
   

独享路由守卫

针对于某个路由的守卫，再路由配置中添加独享路由守卫，例如给detail添加独享守卫

// 引入路由的核心库
import VueRouter from "vue-router";
// 引入要被路由的组件
import Home from "@/components/Home";
import About from "@/components/About";
import News from "@/components/News";
import Message from "@/components/Message";
import Detial from "@/components/Detail";

//  创建并暴露路由
const router =  new VueRouter({
    routes:[
        {
            path:'/',
            component:Home
        },
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news', /* 二级路径不写/ */
                    component:News
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            path:'detail/:id/:title',
                            name:'xq',
                            component:Detial,
                            props:true,
                            // 独享路由守卫
                            beforeRouteEnter(to,from,next){
                                console.log(to);
                                console.log(from);
                                next();
                            }
                        }
                    ]
                }
            ]
        }
    ]
})
export default router;

组件路由守卫

组件内部的路由守卫

1. 前置路由守卫
2. 后置路由守卫，与全局路由守卫不同的是后置路由守卫有next()方法