Vue35 路由

1 简介

　　vue-router是vue的一个插件，专门用来实现SPA应用。SPA也就是单页Web应用，特点是：整个应用只有一个完整的页面，点击页面中的导航链接不会刷新页面，只会做页面的局部更新，数据需要通过ajax请求获取

2 路由的基本使用

　　先来个简单的示例，点击About和Home路由到不同的额组件，展示组件内容

　　

2.1 安装

注意vue2对应router3，vue3对应router4

npm i vue-router@3   #安装的router3

2.2 配置路由器

　　在src下创建一个router文件夹，再创建一个index.js

//引入router
import VueRouter from 'vue-router'

// 引入组件
import AboutComp from '../pages/AboutComp'
import HomeComp from '../pages/HomeComp'

// 创建并暴露一个路由器-路由器里面配置路由
export default new VueRouter({
    routes:[
        {
            path:'/about',   //路径，可随便定义-但是要和<router-link>标签里面的to属性对应上
            component:AboutComp  //组件名
        },
        {
            path:'/home',
            component:HomeComp
        }
    ]
})

2.3 main.js配置router到vm

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'    // 引入VueRouter
import router from './router'                // 引入路由器

Vue.config.productionTip = false

Vue.use(VueRouter)    // 应用Router插件

new Vue({
    el:'#app',
    render: h => h(App),
    router:router //配置router到vm上
})

2.4 组件使用路由

1）app.vue

　　使用路由，主要涉及到两个标签<router-link>和<router-view>

1、router-link标签就相当于导航(最后会被解析成一个a标签)

　　active-class="active"：点击的时候高亮

　　to：点击的时候路由到哪个组件，这里的值和配置路由器里面的路由的path的值要对应

<router-link class="list-group-item"
                       active-class="active" to="/home">Home</router-link>

2、<router-view>

　　路由到的组件要显示在哪里，就在哪里写这个标签

　　

<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
                    <!-- Vue中借助router-link标签实现路由的切换 -->
                    <router-link class="list-group-item"
                       active-class="active" to="/about">About</router-link>
                       <hr/>
          <router-link class="list-group-item"
                       active-class="active" to="/home">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
                        <!-- 指定组件的呈现位置 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name:'App'
    }
</script>

2）AboutComp.vue

<template>
    <h2>我是About的内容</h2>
</template>

<script>
    export default {
        name:'AboutComp'
    }
</script>

3）HomeComp.vue

<template>
    <h2>我是Home的内容</h2>
</template>

<script>
    export default {
        name:'HomeComp'
    }
</script>

4）注意事项

注意事项：一般我们把路由组件放在src/pages，其它组件放在src/components下面。

2.5 效果

点击About

点击Home

3 路由切换时组件的情况

　　默认情况下，从一个组件切换到另一个组件，原组件是会被销毁的

　　当然，也可以通过配置使它不被销毁而是缓存起来(后面会说到）

　　在AboutComp里面加个destoryed函数

<template>
    <h2>我是About的内容</h2>
</template>

<script>
    export default {
        name:'AboutComp',
        destroyed() {
            console.log('AboutComp正要被销毁')
        },
    }
</script>

　　当点击了About，再点击Home时，About的destroyed函数被调用，说明它被销毁了

4 $router和$route

　　$router是路由器对象，只有一个。$route是路由对象，每个组件都有自己的route对象。

　　它们里面有很多我们需要的数据。

　　在app.vue和AboutComp.vue和HomeComp.vue都加上一个mounted函数，打印$router和$route。

1）app.vue

<script>
    export default {
        name:'App',
        mounted() {
            console.log('app@' , this.$router)
            console.log('app@' , this.$route)
        },
    }
</script>

2）AboutComp.vue

<script>
    export default {
        name:'AboutComp',
        mounted() {
            console.log('AboutComp@' , this.$router)
            console.log('AboutComp@' , this.$route)
        },
    }
</script>

3) HomeComp.vue

<script>
    export default {
        name:'HomeComp',
        mounted() {
            console.log('HomeComp@' , this.$router)
            console.log('HomeComp@' , this.$route)
        },
    }
</script>

5 多级路由

　　如在AboutComp组件加一个子路由NewsComp

5.1 配置；路由器index.js

　　在about路由里面配置一个属性childrens，它是一个数组，里面又可以写多个路由配置对象(注意childrens里面的对象的path开头不要/)

//引入router
import VueRouter from 'vue-router'

// 引入组件
import AboutComp from '../pages/AboutComp'
import HomeComp from '../pages/HomeComp'
import NewsComp from '../pages/NewsComp'

// 创建并暴露一个路由器-路由器里面配置路由
export default new VueRouter({
    routes:[
        {
            path:'/about',   //路径，可随便定义-但是要和<router-link>标签里面的to属性对应上
            component:AboutComp,  //组件名
                children:[
                    {
                        path:'news',    //注意，这里不要写/
                        component:NewsComp
                    }
                ]
        },
        {
            path:'/home',
            component:HomeComp
        }
    ]
})

5.2 AboutComp.vue

　　加上router-link和router-view标签

　　注意：router-link标签里面的to要写完整路径(把父组件的路径也带上)

<template>
    <div>
        <h2>我是About的内容</h2>

        <div>
            <router-link class="list-group-item"
                        active-class="active" to="/about/news">News</router-link>
        </div>

        <div class="panel-body">
                        <!-- 指定组件的呈现位置 -->
            <router-view></router-view>
          </div>
    </div>

</template>

<script>
    export default {
        name:'AboutComp',
        mounted() {
            console.log('AboutComp@' , this.$router)
            console.log('AboutComp@' , this.$route)
        },
    }
</script>

5.3 NewsComp.vue

<template>
    <ul>
        <li>news001</li>
        <li>news002</li>
        <li>news003</li>
    </ul>
</template>

<script>
    export default {
        name:'NewsComp'
    }
</script>

5.4 效果

点击About

点击News

6 命名路由

6.1 简介

　　上面我们在src/router/index.js配置路由的时候，采用的是path属性。在router-link的to属性采用/path1/path2..来路有跳转。

　　我们还可以使用name属性来给路由命名，这样子在to属性只需要写成{name:'name的值'}

　　路由的命名要注意不要重复

6.2 示例

在上面的示例中，我们采用的是path属性，访问News组件需要写成/path1/path2的格式

routes:[
        {
            path:'/about',   //路径，可随便定义-但是要和<router-link>标签里面的to属性对应上
            component:AboutComp,  //组件名
                children:[
                    {
                        path:'news',    //注意，这里不要写/
                        component:NewsComp
                    }
                ]
        },
        {
            path:'/home',
            component:HomeComp
        }
    ]

<router-link class="list-group-item"
                        active-class="active" to="/about/news">News</router-link>

下面，为News组件的路由命名为newsName

1）index.js　

//引入router
import VueRouter from 'vue-router'

// 引入组件
import AboutComp from '../pages/AboutComp'
import HomeComp from '../pages/HomeComp'
import NewsComp from '../pages/NewsComp'

// 创建并暴露一个路由器-路由器里面配置路由
export default new VueRouter({
    routes:[
        {
            path:'/about',   //路径，可随便定义-但是要和<router-link>标签里面的to属性对应上
            component:AboutComp,  //组件名
                children:[
                    {
                        name:'newsName', //给路由命名
                        path:'news',    //注意，这里不要写/
                        component:NewsComp
                    }
                ]
        },
        {
            path:'/home',
            component:HomeComp
        }
    ]
})

2）AboutComp.vue

　　注意router-link的to属性写成对象的形式，所以to前面要加上:是的to里面的额内容解析为js代码而不是字符串

<template>
    <div>
        <h2>我是About的内容</h2>

        <div>
            <router-link class="list-group-item"
                        active-class="active" :to="{
                            name:'newsName'
                            }"
                            >News</router-link>
        </div>

        <div class="panel-body">
                        <!-- 指定组件的呈现位置 -->
            <router-view></router-view>
          </div>
    </div>

</template>

<script>
    export default {
        name:'AboutComp',
        mounted() {
            console.log('AboutComp@' , this.$router)
            console.log('AboutComp@' , this.$route)
        },
    }
</script>

3）效果

7 路由传参数

　　路由可以通过query和params两种方式传递参数

7.1 query传递参数

7.1.1 传递参数

　　只需要在router-link的to属性的对象里面加上一个query对象，里面key:value传值

                       :to="{
                            name:'newsName',
                            query:{
                                id:'query传递的第一个参数',
                                name:'query传递的第二个参数'
                            }
                         }"

7.1.2 接收参数

在结束传输的组件通过$route.query获取

$route.query.属性名

$route.query.id
$route.query.name

7.1.3 示例

　　在上面的基础上，对AboutComp.vue和NewsComp.vue进行修改，从AboutComp.vue传递参数到NewsComp.vue

1）AboutComp.vue

<template>
    <div>
        <h2>我是About的内容</h2>

        <div>
            <router-link class="list-group-item"
                        active-class="active" :to="{
                            name:'newsName',
                            query:{
                                'id':'query传递的第一个参数',
                                'name':'query传递的第二个参数'
                            }
                            }"
                            >News</router-link>
        </div>

        <div class="panel-body">
                        <!-- 指定组件的呈现位置 -->
            <router-view></router-view>
          </div>
    </div>

</template>

<script>
    export default {
        name:'AboutComp',
        mounted() {
            console.log('AboutComp@' , this.$router)
            console.log('AboutComp@' , this.$route)
        },
    }
</script>

2）NewsComp.vue

<template>
    <ul>
        <li>{{$route.query.id}}</li>
        <li>{{$route.query.name}}</li>
        <li>news003</li>
    </ul>
</template>

<script>
    export default {
        name:'NewsComp'
    }
</script>

3）效果

7.2 params传递参数

　　注意：params传递参数只能使用name写法不能使用path写法

7.2.1 传递参数

　　只需要在router-link的to属性的对象里面加上一个params对象，里面key:value传值

                       :to="{
                            name:'newsName',
                            params:{
                                'id':'query传递的第一个参数',
                                'name':'query传递的第二个参数'
                            }
                         }"

 7.2.2 声明接收的参数

　　在结束的组件的路由配置的path属性声明接收的参数，在path属性的值后面添加/:参数名，可添加多个

 path:'news/:参数1名称/:参数2名称',    //:xx 用于声明接收param参数

7.2.3 接收参数

在结束传输的组件通过$route.params获取

$route.params.属性名

$route.params.id
$route.params.name

7.1.3 示例

　　在上面的基础上，对index.js和AboutComp.vue和NewsComp.vue进行修改，从AboutComp.vue传递参数到NewsComp.vue

 1）index.js

//引入router
import VueRouter from 'vue-router'

// 引入组件
import AboutComp from '../pages/AboutComp'
import HomeComp from '../pages/HomeComp'
import NewsComp from '../pages/NewsComp'

// 创建并暴露一个路由器-路由器里面配置路由
export default new VueRouter({
    routes:[
        {
            path:'/about',   //路径，可随便定义-但是要和<router-link>标签里面的to属性对应上
            component:AboutComp,  //组件名
                children:[
                    {
                        name:'newsName', //给路由命名
                        path:'news/:id/:name',    //:xx 用于声明接收param参数
                        component:NewsComp
                    }
                ]
        },
        {
            path:'/home',
            component:HomeComp
        }
    ]
})

2）AboutComp.vue

<template>
    <div>
        <h2>我是About的内容</h2>

        <div>
            <router-link class="list-group-item"
                        active-class="active" :to="{
                            name:'newsName',
                            params:{
                                'id':'params传递的第一个参数',
                                'name':'params传递的第二个参数'
                            }
                            }"
                            >News</router-link>
        </div>

        <div class="panel-body">
                        <!-- 指定组件的呈现位置 -->
            <router-view></router-view>
          </div>
    </div>

</template>

<script>
    export default {
        name:'AboutComp',
        mounted() {
            console.log('AboutComp@' , this.$router)
            console.log('AboutComp@' , this.$route)
        },
    }
</script>

3）NewsComp.vue

<template>
    <ul>
        <li>{{$route.params.id}}</li>
        <li>{{$route.params.name}}</li>
        <li>news003</li>
    </ul>
</template>

<script>
    export default {
        name:'NewsComp'
    }
</script>

4）效果

8 路由的props配置

　　它的作用是参数名称映射

8.1 示例

1）index.js

　　在news组件的路由配置加上了props属性

//引入router
import VueRouter from 'vue-router'

// 引入组件
import AboutComp from '../pages/AboutComp'
import HomeComp from '../pages/HomeComp'
import NewsComp from '../pages/NewsComp'

// 创建并暴露一个路由器-路由器里面配置路由
export default new VueRouter({
    routes:[
        {
            path:'/about',   //路径，可随便定义-但是要和<router-link>标签里面的to属性对应上
            component:AboutComp,  //组件名
                children:[
                    {
                        name:'newsName', //给路由命名
                        path:'news/:id/:name',    //:xx 用于声明接收param参数
                        component:NewsComp,
                        props($route){ //props属性配置，用于参数映射
                            return {
                                id:$route.params.id,
                                name:$route.params.name
                            }

                        }
                    }
                ]
        },
        {
            path:'/home',
            component:HomeComp
        }
    ]
})

2）NewsComp.vue

　　在NewsComp.vue的props属性中添加在index.js中的props属性映射

　　这样子就可以通过{{id}}  {{name}} 直接访问到传递过来的参数

<template>
    <ul>
        <li>{{id}}</li>
        <li>{{name}}</li>
        <li>news003</li>
    </ul>
</template>

<script>
    export default {
        name:'NewsComp',
        props:['id','name']
    }
</script>

对比下

使用props映射前

<li>{{$route.query.id}}</li>
 <li>{{$route.query.name}}</li>

使用props映射后

<li>{{id}}</li>
<li>{{name}}</li>

感觉这个属性不是很好用，vc上的属性来源已经很多了，名字容器重复，还不如直接$route去获取　　

9 replace属性

9.1 浏览器的历史记录简介

　　当我们点击导航一层层往下路由组件时，可以通过浏览器的后退键回退，回退后，又可以通过前进键前进

浏览器记录历史分为两种，push和replace，默认情况下就是push

9.2 push

　　push是压栈的模式，每次路由都把新的放到最上面

9.3 replace

　　replace是用新的替换旧的

9.4 路由的replace属性

1）示例

　　只需要在<router-link>标签加上属性replace即可开启这个组件的replace模式

　　在AboutComp的<router-link>标签加上replace属性

<router-link class="list-group-item"
                        active-class="active" replace :to="{
                            name:'newsName',
                            params:{
                                'id':'params传递的第一个参数',
                                'name':'params传递的第二个参数'
                            }
                            }"
                            >News</router-link>

　　那么about跳转到news的时候，news的记录会替换about的记录

　

2）效果

点击回退，直接回到了最初而不是about组件的内容

10 编程式路由

　　上面都是采用<router-link>标签来完成的导航，除了它，还可以使用编程式。借助$router来实现

10.1 $router的几个函数介绍

$router.push({})  //代替<router-link>，push模式的，里面传入的对象和router-link的to里面的额对象一样

$router.replace({}) //代替<router-link>，push模式的，里面传入的对象和router-link的to里面的额对象一样

$router.forward()  //前进-等同于浏览器的前进键
$router.back() 　　//后退-等同于浏览器的后推键

$router.to(n)  //前进或后退 n为数组，正数标识前进几个，负数标识后退几个

10.2 示例

修改AboutComp.vue 使用$router代替<router-link>标签

<template>
    <div>
        <h2>我是About的内容</h2>

        <div>

            <button @click="cli">news </button>

        </div>

        <div class="panel-body">
                        <!-- 指定组件的呈现位置 -->
            <router-view></router-view>
          </div>
    </div>

</template>

<script>
    export default {
        name:'AboutComp',
        methods: {
            cli(){
                this.$router.push({
                    name:'newsName',
                    params:{
                        'id':'params传递的第一个参数',
                        'name':'params传递的第二个参数'
                    }
                })
            }
        },
    }
</script>

11 缓存路由组件

　　在最开始讲到，有一个组件路由到另一个组件，原组件默认会被销毁，我们可以设置它不被销毁，而是缓存起来

11.1 格式

　　想要某些组件不被销毁，在这些组件存放的位置<router-view>标签外层加上<keep-alive>标签。那么，这里出现的这些组件会不被销毁

1）某个组件不被销毁

// 缓存一个路由组件
<keep-alive include="News"> // include中写想要缓存的组件名，不写表示全部缓存
    <router-view></router-view>
</keep-alive>

2）多个组件不被销毁

// 缓存多个路由组件
<keep-alive :include="['News','Message']">
    <router-view></router-view>
</keep-alive>

3）全部组件不被销毁

// 缓存多个路由组件
<keep-alive >
    <router-view></router-view>
</keep-alive>

11.2 示例

1）AboutComp.vue

　　加上<keep-alive>标签

<template>
 <div>
  <h2>我是About的内容</h2>

  <div>

   <button @click="cli">news </button>

  </div>

   <keep-alive include="NewsComp">
             <router-view></router-view>
   </keep-alive>

 </div>

</template>

<script>
 export default {
  name:'AboutComp',
  methods: {
   cli(){
    this.$router.push({
     name:'newsName',
     params:{
      'id':'params传递的第一个参数',
      'name':'params传递的第二个参数'
     }
    })
   }
  },
 }
</script>

2）NewsComp.vue

　　加上destroyed函数

<template>
    <ul>
        <li>{{id}}</li>
        <li>{{name}}</li>
        <li>news003</li>
    </ul>
</template>

<script>
    export default {
        name:'NewsComp',
        props:['id','name'],
        destroyed() {
            console.log('news组件销毁')
        },
    }
</script>

3）效果

点击回退，newscomp的destroyed没有被触发，说明没有销毁

12 路由独有的两个生命函数

12.1 简介

　　路由独有两个生命函数，分别为activited和deactivited

　　activited：被 keep-alive 缓存的组件失活时调用

　　deactivited：被 keep-alive 缓存的组件激活时调用

　　官方文档：https://v2.cn.vuejs.org/v2/api/

12.2 注意事项

　　1）activated和deactivated是配合keep-alive一起使用的

　　2）activated和deactivated没有keep-alive的时候是不会被触发的

　　3）当keepalive页面缓存，有activated钩子和created钩子函数时，这两个函数会被同时触发，此时可以使用activated代替created，因为created只会触发一次

　　4）页面被缓存下来的时候，不会触发destroyed生命钩子，取而代之触发的是deactivated钩子

12.3 它的作用

　　keepalive页面缓存下来的时候，只会调用一次created这个钩子函数，因为已经被缓存下来了，所以我们重新进入这个组件的时候， 就不会触发created钩子了，created这个钩子就是只有页面渲染的时候会触发。那么就可以使用的activated钩子函数。deactivated同样如此，从一个离开的时候，由于缓存destoryed不会触发，那么就可以使用的deactivated钩子函数

12.4 方法格式

<script>
    export default {
        name:'News',
        data(){
            return{
                opacity:1
            }
        },
        activated(){
            console.log('News组件被激活了')

        },
        deactivated(){
            console.log('News组件失活了')
        }
    }
</script>

13 路由守卫

13.1 简介

　　它的作用是对路由器进行权限控制,可以理解为拦截器类似的东西
　　它分为三类：全局守卫、独享守卫、组件内守卫

13.2 全局路由守卫

初始化的时候、每次路由切换之前被调用，针对所有路由组件

13.2.1 守卫函数

　　beforeEach ：前置守卫，初始化时、每次路由切换前执行

　　affterEach ：后置守卫，初始化时、每次路由切换后执行

13.2.2 配置格式

　　在router/index.js配置

//引入router
import VueRouter from 'vue-router'

// 引入组件
import AboutComp from '../pages/AboutComp'
import HomeComp from '../pages/HomeComp'
import NewsComp from '../pages/NewsComp'

// 创建并暴露一个路由器-路由器里面配置路由
const router = new VueRouter({
    routes:[
        {
            path:'/about',   //路径，可随便定义-但是要和<router-link>标签里面的to属性对应上
            component:AboutComp,  //组件名
                children:[
                    {
                        name:'newsName', //给路由命名
                        path:'news/:id/:name',    //:xx 用于声明接收param参数
                        component:NewsComp,
                        props($route){
                            return {
                                id:$route.params.id,
                                name:$route.params.name
                            }

                        }
                    }
                ]
        },
        {
            path:'/home',
            component:HomeComp
        }
    ]
})

// 全局前置路由守卫————初始化的时候、每次路由切换之前被调用
router.beforeEach((to,from,next) => {   //to是要去的组件，from是原组件，next是个函数，调用后才会切换到to的组件，否则不切换
    console.log('前置路由守卫',to,from)
    //逻辑处理
    next()  //放行

})

// 全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
    console.log('后置路由守卫',to,from)
    //逻辑处理
})

// 导出路由器
export default router

13.2.3 meta.isAuth

　　在使用全局路由守卫的时候，如果只是部分路由组件需要守卫，那么就可以此使用meta属性

　　在meta中配置属性isAuth:true，标识这个路由组件需要守卫，这样子，我们在全局守卫的函数就可以通过meta.isAuth去判断哪些需要守卫了

{
                        name:'newsName', //给路由命名
                        path:'news/:id/:name',    //:xx 用于声明接收param参数
                        component:NewsComp,
                        meta:{
                            isAuth:true
                        }
                    }

守卫函数，通过meta.isAuth判断

router.beforeEach((to,from,next) => {
    if(to.isAuth){ //判断是否需要守卫
        console.log('前置路由守卫',to,from)
        //逻辑处理
    }
    next()  //放行
})

　　完整

//引入router
import VueRouter from 'vue-router'

// 引入组件
import AboutComp from '../pages/AboutComp'
import HomeComp from '../pages/HomeComp'
import NewsComp from '../pages/NewsComp'

// 创建并暴露一个路由器-路由器里面配置路由
const router = new VueRouter({
    routes:[
        {
            path:'/about',   //路径，可随便定义-但是要和<router-link>标签里面的to属性对应上
            component:AboutComp,  //组件名
                children:[
                    {
                        name:'newsName', //给路由命名
                        path:'news/:id/:name',    //:xx 用于声明接收param参数
                        component:NewsComp,
                        props($route){
                            return {
                                id:$route.params.id,
                                name:$route.params.name
                            }

                        },
                        meta:{
                            isAuth:true
                        }
                    }
                ]
        },
        {
            path:'/home',
            component:HomeComp
        }
    ]
})

// 全局前置路由守卫————初始化的时候、每次路由切换之前被调用
router.beforeEach((to,from,next) => {   //to是要去的组件，from是原组件，next是个函数，调用后才会切换到to的组件，否则不切换
    if(to.isAuth){
        console.log('前置路由守卫',to,from)
        //逻辑处理
    }
    next()  //放行
})

// 全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
    console.log('后置路由守卫',to,from)
    //逻辑处理
})

// 导出路由器
export default router

13.3 独享路由守卫

指定路由切换之后被调用

13.3.1 守卫函数

　　beforeEnter ：切换路由前触发

13.3.2 配置格式

　　在NewsComp这个组件里面配置独享路由守卫，那么就只会对它生效

//引入router
import VueRouter from 'vue-router'

// 引入组件
import AboutComp from '../pages/AboutComp'
import HomeComp from '../pages/HomeComp'
import NewsComp from '../pages/NewsComp'

// 创建并暴露一个路由器-路由器里面配置路由
const router = new VueRouter({
    routes:[
        {
            path:'/about',   //路径，可随便定义-但是要和<router-link>标签里面的to属性对应上
            component:AboutComp,  //组件名
                children:[
                    {
                        name:'newsName', //给路由命名
                        path:'news/:id/:name',    //:xx 用于声明接收param参数
                        component:NewsComp,
                         // 独享守卫，特定路由切换之后被调用
                         beforeEnter(to,from,next){
                            console.log('独享路由守卫',to,from)
                            //逻辑处理
                            next()
                        },
                        props($route){
                            return {
                                id:$route.params.id,
                                name:$route.params.name,

                            }

                        },

                    }
                ]
        },
        {
            path:'/home',
            component:HomeComp
        }
    ]
})

// 导出路由器
export default router

13.4 组件内路由守卫

13.4.1 守卫函数

　　beforeRouterEnter ：通过路由进入该组件时被调用(非路由进入组件的不会调研)

　　beforeRouterLeave ：通过路由离开该组件时被调用(非路由进入组件的不会调研)

13.4.2 配置格式

　　和上面两个不同，它是在组件文件里面配置的

<template>
 <div>
  <h2>我是About的内容</h2>

  <div>

   <button @click="cli">news </button>

  </div>

   <keep-alive include="NewsComp">
             <router-view></router-view>
   </keep-alive>

 </div>

</template>

<script>
 export default {
  name:'AboutComp',
  methods: {
   cli(){
    this.$router.push({
     name:'newsName',
     params:{
      'id':'params传递的第一个参数',
      'name':'params传递的第二个参数'
     }
    })
   }
  },
    beforeRouteEnter (to, from, next) {
        console.log('About--beforeRouteEnter',to,from)
        next()

    },
        // 通过路由规则，离开该组件时被调用
    beforeRouteLeave (to, from, next) {
        console.log('About--beforeRouteLeave',to,from)
        next()
    }
 }
</script>