Vue：路由route

一、概念

1、组成

每一个路由都由 key 和 value 组成。 key+value===路由 route。

2、本质

路由的本质：一个路由表达了一组对应关系。路由器的本质：管理多组对应关系。

3、路由的工作原理

点击之后路径变化——>路由器监视到变化——>根据路径匹配路由——>完成切换

4、路由器的工作原理

不停的监视路径的变化，只要路径变化，路由器就会找到相应的路由，完成切换。

二、简单使用形式

1、安装 vue-router

安装vue-router插件：npm i vue-router@3。

2、main.js 中引入并使用 vue-router

导入：import VueRouter from 'vue-router'，使用：Vue.use(VueRouter)，

new Vue 时添加新的配置项：一旦使用了 vue-router 插件，添加一个全新的配置项：router。

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false//导入router插件
import VueRouter from 'vue-router'
//导入路由对象
import router from './router/index'
//使用插件
Vue.use(VueRouter)
new Vue({el: '#app',router: router,render: h => h(App)
})

3、使用路由

router 路由器的创建一般放在一个独立的 js 文件中

在独立的js中创建路由器对象，并且将其暴露。然后在 main.js 文件中引入该路由器即可。

//导插件
import VueRouter from "vue-router";
//导组件
import HB from '../components/HB'
import HN from '../components/HN'
import CZ from '../components/CZ'
import SJZ from '../components/SJZ'
// 创建路由
const router = new VueRouter({//配置多个路由routes: [{path: '/hb',component: HB,children: [{path: 'cz',component: CZ},{path: 'sjz',component: SJZ}]},{path: '/hn',component: HN}]
})
// 暴露路由
export default router

 4、在App.vue 中使用 router-link 标签代替 a 标签

<template><div><div><h1>省份</h1><ul><!-- 如果使用的是路由方式，就不能使用超链接a标签了，需要使用vue-router插件提供的一个标签 --><!-- router-link 将来会被自动编译为a标签。 --><li><router-link to="/hb" active-class="selected">河北省</router-link></li><li><router-link to="/hn" active-class="selected">河南省</router-link></li></ul></div><!-- 路由视图，其实就是起到一个占位的作用。 --><keep-alive :include="[HB, HN]"><router-view></router-view></keep-alive></div>
</template>

5、激活样式属性

使用 active-class 属性，在激活时添加样式，

        <li><router-link to="/hn" active-class="selected">河南省</router-link></li>

6、指定组件的存放位置

路由视图，起到占位的效果

<router-view></router-view>

7、路由组件的两个属性

$route：属于自己的路由对象。  $router：多组件共享的路由器对象。 

8、多级路由的使用

const router = new VueRouter({//配置多个路由routes: [{path: '/hb',component: HB,children: [{path: 'cz',component: CZ},{path: 'sjz',component: SJZ}]},{path: '/hn',component: HN}]
})

注意：children里面的path属性不能加“/”

9、路由query的传参

目的是提高代码复用性

路由对象中有一个query属性，这个query属性可以接收query方式传递过来的数据。

this.$route.query

①直接传参

<li><router-link to="/hebei/city?a1=长安区&a2=裕华区&a3=新华区" active-class="selected">石家    庄  </router-link>
</li>
<li><router-link to="/hebei/city?a1=新华区&a2=运河区&a3=东光区" active-class="selected">沧州    </router-link>
</li>

②采用query方式传参，字符串拼接方式

<li><router-link :to="`/hebei/city?a1=${sjz[0]}&a2=${sjz[1]}&a3=${sjz[2]}`" active-class="selected">石家庄</router-link>
</li>
<li><router-link :to="`/hebei/city?a1=${cz[0]}&a2=${cz[1]}&a3=${cz[2]}`" active-class="selected">邯郸</router-link>
</li> 

data() {return {sjz : ['长安区3', '裕华区2', '新华区2'],cz : ['运河区', '新华区', '东光区']}
},

③采用query方式传参，使用对象形式

<li><router-link active-class="selected" :to="{path : '/hebei/city',query : {a1 : sjz[0],a2 : sjz[1],a3 : sjz[2],}}"> 石家庄</router-link>
</li>

data() {return {sjz : ['长安区', '裕华区', '新华区'],cz : ['运河区', '新华区', '东光区']}
},

10、params传参

<li>params方式传参：字符串形式，写死的字符串 --><router-link active-class="selected" to="/hebei/sjz/裕华区/新华区/长安区">石家庄</router-link></li>

params方式传参：字符串形式，拼接字符串
<li><router-link active-class="selected" :to="`/hebei/sjz/${sjz[0]}/${sjz[1]}/${sjz[2]}`">石家庄</router-link>
</li>

params方式传参：对象形式
<li><router-link active-class="selected" :to="{// 强调：如果使用的是params方式传参，这里只能使用name，不能使用pathname : 'shi',params : {a1 : sjz[0],a2 : sjz[1],a3 : sjz[2],}}">石家庄</router-link>
</li>

11、路由的props

props 配置主要是为了简化 query 和 params 参数的接收。让插值语法更加简洁。

①不是动态数据，将对象中的key和value通过props传给shi组件。

props : {x : '张三',y : '李四'
}

<li>{{x}}</li>
<li>{{y}}</li>

export default {props:["x","y"]    
}

②函数式方式

props($route){ return {a1 : $route.params.a1,a2 : $route.params.a2,}
}

注:$route将来会被自动传过来，它代表了当前的路由对象。变量名随意的。

<li>{{a1}}</li>
<li>{{a2}}</li>

export default {props:["a1","a2"]    
}

12、栈的存储方式

push模式（默认）：以追加的方式入栈。replace模式：以替换栈顶元素的方式。

开启replace模式

<router-link :replace=”true”/>
<router-link replace />

13、缓存路由组件

默认情况下路由切换时，路由组件会被销毁。有时需要在切换路由组件时保留组件（缓存起来）

<keep-alive inclue=”组件名称”><router-view/>
</keep-alive>

 不写 include 时：<router-view>包含的所有路由组件全部缓存。多个路由采用数组形式。

14、两个钩子函数(activated 和 deactivated)

只有“路由组件”有这两个生命周期钩子函数。

路由组件被切换到的时候，activated 被调用。 路由组件被切走的时候，deactivated 被调用。

作用是捕获路由组件的激活状态。

三、路由守卫

1、全局前置守卫

router/index.js 文件中拿到 router 对象。

router.beforeEach((to, from, next)=>{<-- to from next --> 
})

to：是从哪来(to.path,to.name)；from：从哪来，next：调用next()。

2、全局后置路由

router.afterEach((to, from)=>{ //每次后（寓意：每一次切换路由后执行。）// 没有 nextdocument.title = to.meta.title // 通常使用后置守卫完成路由切换时 title 的切换。
})

初始化时执行一次，以后每一次切换路由之后调用一次。

3、局部路由守卫之 path 守卫

                    beforeEnter(to, from, next){let loginName = 'admin'if(loginName === 'admin'){next()}else{alert('对不起，您没有权限！')}},

没有afterEnter

4、局部路由守卫值component守卫

进入路由组件之前，必须是路由组件才能触发，普通组件不触发。

beforeRouteEnter(to, from, next){console.log(city)next()},

离开路由组件之后，必须是路由组件才能触发，普通组件不触发。

beforeRouteleave(to, from, next){console.log(city)next()},

只有路由组件才有这两个钩子