一、相关理解
1.路由就是一组key-value的对应关系
多个路由，需要经过路由器的管理
一个路由就是一组映射关系（key-value）
key为路径，value可能是function或component
路由分类:
后端路由：
理解：value是function，用于处理客服端提交的请求
工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，
返回响应数据
前端路由：
理解：value是component，用于展示页面内容
工作过程：当浏览器的路径改变时，对应的组件就会显示
2.vue-router的理解：vue的一个插件库，专门用来实现SPA应用
3.对SPA应用的理解：
单页面Web应用
整个页面只有一个完整的页面
点击页面中的导航链接不会刷新页面，只会做页面的局部更新
数据需要通过ajax请求获取
二、基本使用
1.安装 vue-router 命令：
npm i vue-router2.应用插件：
Vue.use(VueRouter)3.编写router配置项：
// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
import About from '../components/About.vue'
import Home from '../components/Home.vue'
// 创建一个路由器
const router = new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})
//暴露
export default router4.实现切换（active-class可配置亮高样式）
<router-link class="list-group-item" active-class="active" to="/about">
About</router-link>5.指定展示位置
<router-view></router-view>三、几个注意点
1.路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹
2.通过切换，"隐藏"了的路由组件，默认是被销毁掉的，需要的时候再去挂载
3.每个组件都有自己的$route属性，里面存储着自己的路由信息
4.整个应用只有一个$router，可以通过组件的$router属性获取到
四、多级（嵌套）路由
1.配置路由规则。使用children配置项：
// 创建并暴露一个路由器
export default new VueRouter({
routes:[
// 一级路由
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
// 二级路由
children:[ //通过children配置子级路由
{
path:'news', //不要写 /news
component:News
},
{
path:'message',
component:Message
}
]
},
]
})2.路由跳转（要写完整路径）：
<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>五、路由的query参数
1.传递参数
<!-- 跳转路由并携带query参数 to的字符串写法 -->
<!-- <router-link :to="`/home/message/details?id=${m.id}&title=${m.title}`">{{m.title}}</router-link> -->
<!-- 跳转路由并携带query参数 to的对象写法 -->
<router-link
:to="{
path:'/home/message/details',
query:{
id:m.id,
title:m.title
}
}">
{{m.title}}
</router-link> 2.接收参数：
$route.query.id
$route.query.title六、命名路由
1.作用：可以简化路由的跳转
2.如何使用：
(1).给路由命名：
{
path:'/demo',
component:Demo,
children:[
{
path:'test',
component:Test,
children:[
{
name:'hello' //给路由命名
path:'welcome',
component:Welcome,
}
]
}
]
}(2).简化跳转：
跳转前 需要写完整的路径
<router-link :to="/demo/test/welcome">跳转</router-link>跳转 直接通过名字跳转
<router-link :to="{ name:'hello' }">跳转</router-link>简化写法配合传参数
<router-link
:to="{
name:'hello',
query:{
id:m.id,
title:m.title
}
}">
跳转
</router-link>七、路由的params参数
1.配置路由，声明接收params参数
export default new VueRouter({
routes:[
// 一级路由
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
// 二级路由
children:[ //通过children配置子级路由
{
path:'news', //不要写 /news
component:News
},
{
path:'message',
component:Message,
children:[
{
name:'xiangqing',
path:'details/:id/:title', //params传参时 此处必须加 使用占位符声明接收params参数
component:Details,
}
]
}
]
},
]
})2.传递参数
<!-- 跳转路由并携带params参数 to的字符串写法 -->
<router-link :to="`/home/message/details/${m.id}/${m.title}`">{{m.title}}</router-link>
<!-- 跳转路由并携带params参数 to的对象写法 -->
<!-- 注意此处 必须写name 不能写path -->
<!-- <router-link
:to="{
name:'xiangqing',
params:{
id:m.id,
title:m.title
}
}">
{{m.title}}
</router-link> -->注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置
3.接收参数
$route.params.id
$route.params.title八、路由的props配置
作用：让路由组件更方向的收到参数
1.props的第一种写法，值为对象,该对象中的所有key-value都会以props的形式传给Details组件
props:{a:1,b:'你好啊'}
2.props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件接收到的所有params参数，以props的形式传给Details组件
props:true
3.props的第三种写法，值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
props($route){
return {id:$route.query.id,title:$route.query.title}
}
或
props({query}){
return {id:query.id,title:query.title}
}
或
props({query:{id,title}}){
return {id,title}
}九、< route-link>的replace属性
1.作用：控制路由的跳转时操作浏览器历史记录的模式
2.浏览器的历史记录有两种写入方式：分比为push和replace，push是追加历史记录，replace是替换当前记录。
路由跳转的时候默认为push
3.如何开启replace模式：<route-link replace .......>....< /route-link>
十、编程式路由导航
1.作用：不借助< router-link>实现路由跳转，让路由跳转更加灵活
2.具体编码：
methods: {
pushShow(m){
this.$router.push({
name:'xiangqing',
query:{
id:m.id,
title:m.title
}
})
},
replaceShow(m){
this.$router.replace({
name:'xiangqing',
query:{
id:m.id,
title:m.title
}
})
}
},
return this.$router.back() //前进
return this.$router.forward() //后退
return this.$router.go(n) //传入的参数是正数 连续向前走三步 传入的参数是负数 连续向后退三步十一、缓存路由组件
1，作用：让不展示的路由租金保持挂载，不被销毁
2.具体编码：
注意：需要展示的内容在哪个组件里面 就在哪写
(1).如果缓存所有的路由组件 include不写
(2). 缓存多个路由组件
<keep-alive :include="['News','Message']">
<router-view></router-view>
</keep-alive>
(3).缓存一个路由组件
<!-- include="News" News是组件名 -->
<keep-alive include="News">
<router-view></router-view>
</keep-alive>十二、两个新的生命周期钩子
1.作用：路由组件所独有的两个钩子，用于捕获路由组件的救火状态
2.具体名字：
activated 路由组件被激活时触发
deactivated 路由组件失活时触发
十三、路由守卫
1.作用：对路由进行权限控制
2.分类：全局守卫、独享守卫、组件内守卫
3.全局守卫
// 全局前置路由守卫
// 每次路由切换之前被调用、初始化时被调用
router.beforeEach((to,from,next)=>{
if(to.meta.isAuth){ //判断是否需要进行权限控制
if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
next() //放行
}else{
alert('学校名不对，无权限查看！')
}
}else{
next()
}
})
// 全局后置路由守卫
// 每次路由切换之后被调用、初始化时被调用
router.afterEach((to,from)=>{
if(to.meta.title){
document.title = to.meta.title
}else{
document.title = 'myvue'
}
})4.独享守卫:(谁需要插到谁的路由中)
// 独享路由守卫
beforeEnter:(to,from,next) =>{
if(to.meta.isAuth){ //判断是否需要鉴权
if(localStorage.getItem('school') === 'atguigu'){
next()
}else{
alert('学校名不对，无权限查看！')
}
}else{
next()
}
}5.组件内路由守卫
//进入守卫 通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
console.log('组件内路由守卫');
if(to.meta.isAuth){ //判断是否需要鉴权
if(localStorage.getItem('school') === 'atguigu'){
next()
}else{
alert('学校名不对，无权限查看！')
}
}else{
next()
}
},
//离开守卫 通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
next()
}十四、路由器的两种工作模式
mode默认是hash
mode:'history', 更改工作模式
1.对于一个url来说，hash值是：#及其后面的内容就是hash值
2.hash值不会包含在HTTP请求中，即：hash值不会带给服务器
3.hash模式：
(1).地址中永远带着#号，不美观
(2).若以后通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
(3).兼容性较好
4.history模式
(1).地址干净，美观
(2).兼容性和hash模式相比略差
(3).应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
