Vue_路由_query参数_params参数_命名路由_props配置_编程式路由导航_缓存路由组件_新的生命周期钩子_全局、独享、组件内路由守卫

文章目录

一、路由概述
二、基本使用
- 1. 安装vue-router
- 2. 应用插件
- 3.编写router配置项
- 4. 实现切换
- 5. 指定组件的呈现位置
- 多级路由（嵌套路由）
- 1.配置路由规则，使用children配置项
- 2.跳转（写完整路径）
三、路由的query参数
- 1.传递参数
- 2.接收参数
四、命名路由
- 1.命名
- 2.简化跳转
五、路由的params参数
- 1.配置路由，声明接收`params`参数
- 2.传递参数
- 3.接收参数
六、路由的props配置
七、 `` 的`replace`模式
八、编程式路由导航
九、缓存路由组件
十、两个新的生命周期钩子
十一、路由守卫
- 1.全局路由守卫
- 2.独享路由守卫
- 3.组件内路由守卫
十二、路由器的两种工作模式

一、路由概述

一个路由就是一组key:value的对应关系（key为路径，value可能是function或component）

前端路由：（value是component）用于展示页面内容，当浏览器的路径改变时，对应的组件就会显示。

多个路由需要经过路由器的管理

router包含多个route规则（/class => 班级组件、/subject => 学科组件）

vue-router 专门用来实现SPA应用

注： SPA页面（单页面应用）（只有一个完整的页面）

（点击页面中导航链接不会刷新页面，只会做页面的局部更新）

二、基本使用

router-link最终转换为a标签

1. 安装vue-router

npm i vue-router

2. 应用插件

import VueRouter from 'vue-router'
Vue.use(VueRouter)

3.编写router配置项

创建文件 `src/router/index.js`

//该文件专门用于创建整个应用的路由器
//引入VueRouter
import VueRouter from "vue-router"//引入路由组件
import About from '../pages/About'
import Home from '../pages/Home'//创建router实例对象，管理一组一组的路由规则
const router = new VueRouter({routes:[{path:'/about',components:About},{path:'/home',component:Home}]
})
//暴露router
export default router

4. 实现切换

<router-link active-class="active" :to="/about">About</router-link>

注：router-link最终转换为a标签，:to类似于href，active-class可配置高亮样式

5. 指定组件的呈现位置

<router-view></router-view>

注：

路由组件专门放入新建pages文件夹中，一般组件通常存放在components文件夹中。
通过切换，隐藏了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
每个组件都有自己的$route属性，里面存储着自己的路由信息
整个应用只有一个router，可以通过组件的$router属性获取到

多级路由（嵌套路由）

1.配置路由规则，使用children配置项

export default new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home,children:[            //配置子级路由{path:'news',        //不用再加/component:News,},{path:'message',        //不用再加/component:Message}]}]
})

2.跳转（写完整路径）

<router-link :to="/home/news">About</router-link>

三、路由的query参数

1.传递参数

（Message.vue内）

<!-- 跳转路由并携带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.接收参数

（Detail.vue内）

{{$route.query.id}}
{{$route.query.title}}

四、命名路由

（简化路由的跳转）

1.命名

export default new VueRouter({routes:[{name:'xiaoxi',path:'/message',component:Message,children:[{name:'xiangqing'path:'detail',        //不用再加/component:Detail,},]},
})

2.简化跳转

<!-- 简化前写完整路径 -->
<router-link to="/message/detail">跳转</router-link>
<!-- 简化后通过名字跳转 -->
<router-link :to="{name:'xiangqing'}">跳转</router-link>
<!-- 简化写法配合传递参数 -->
<router-link :to="{name:'xiangqing',query:{id:m.id,title:m.title}}">
跳转</router-link>

五、路由的params参数

1.配置路由，声明接收`params`参数

{path:'/home',component:Home,children:[            //配置子级路由{path:'news',        //不用再加/component:News,},{path:'message',        //不用再加/component:Message,children:[{name:'xiangqing',path:'detail/:id/:title',         //使用占位符声明接收params参数component:Detail}]}]
}

2.传递参数

（Message.vue内）

<!-- 跳转路由并携带params参数 to的字符串写法 -->
<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link><!-- 跳转路由并携带query参数 to的对象写法 -->
<!-- 必须写name 不能用path写 -->
<router-link :to="{name:'xiangqing',params:{id:m.id,title:m.title}}">{{m.title}}
</router-link>

注：携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置

3.接收参数

（Detail.vue内）

$route.params.id
$route.params.title

六、路由的props配置

让路由组件更方便的收到参数

{name:'xiangqing',path:'detail',component:Detail,// props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给detail组件// props:{a:1,b:'hello'}    写死了// props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件// props:true// props的第三种写法，值为函数，该函数返回对象中的每一组key-value都会通过props传给Detail组件props($route){return {id:$route.query.id,title:$route.query.title}}//连续解构赋值/* props({query:{id,title}}){return {id,title}} */
}

Detail.vue内接收

props:['id','title']

七、 `<router-link>` 的`replace`模式

（控制路由跳转时操作浏览器历史记录的模式）

浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录，默认为push

<router-link replace ...>News</router-link>

八、编程式路由导航

（不借助<router-link>实现路由跳转）

Message.vue内两个按钮的点击事件的具体内容

this.$router.push({name:'xiangqing',params:{id:xxx,title:xxx}
})
this.$router.replace({name:'xiangqing',params:{id:xxx,title:xxx}
})

this.$router.back()      //后退
this.$router.forward()  //前进
this.$router.go(-2)     //正数连续前进n步，负数连续后退n步

九、缓存路由组件

让不展示的路由组件保持挂载，不被销毁

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

十、两个新的生命周期钩子

路由组件独有的，用于捕获路由组件的激活状态

activated：路由组件被激活时触发

deactivated：路由组件失活时触发

十一、路由守卫

保护路由的安全（权限）

1.全局路由守卫

index.js内

//全局前置路由守卫————初始化被调用，每次路由切换之前被调用
router.beforeEach((to,from,next)=>{console.log('前置路由守卫',to,from);if(to.meta.isAuth){     //判断是否需要鉴权// if(to.path === '/home/news' || to.path === '/home/message'){if(localStorage.getItem('school')==='xiaoxue'){next()}else{alert('学校名不对，无权限查看')}}else{next()          //放行}
})//全局后置路由守卫————初始化被调用，每次路由切换之后被调用
router.afterEach((to,from)=>{console.log('后置路由守卫',to,from);document.title = to.meta.title || '系统'
})
export default router

注：meta：路由元信息，在路由组件内添加，设置isAuth值为true的组件需要鉴权

next()：放行

2.独享路由守卫

某一个路由所独享的，在其路由配置内编写。（只有前置没有后置）

beforeEnter: (to, from, next) => {console.log('前置路由守卫',to,from);if(to.meta.isAuth){     //判断当前路由是否需要进行权限控制// if(to.path === '/home/news' || to.path === '/home/message'){if(localStorage.getItem('school')==='xiaoxue'){next()}else{alert('学校名不对，无权限查看')}}else{next()}
}

3.组件内路由守卫

在组件内编写。

//通过路由规则，进入该组件时被调用
beforeRouteEnter(to, from, next) {console.log("beforeRouteEnter", to, from);if (to.meta.isAuth) {//判断是否需要鉴权// if(to.path === '/home/news' || to.path === '/home/message'){if (localStorage.getItem("school") === "xiaoxue") {next();} else {alert("学校名不对，无权限查看");}} else {next();}
},
//通过路由规则，离开该组件时被调用
beforeRouteLeave(to, from, next) {console.log('About--beforeRouteLeave',to,from);next()
}

十二、路由器的两种工作模式

1.hash值：#及其后面的内容

#/about 都成为hash值

2.hash值不会成为路径的一部分，不会包含在HTTP请求中，不会带给服务器。

3.hash模式：兼容性好

4.history模式：兼容性差，应用部署上线后需要后端支持，解决刷新页面后404问题

const router = new VueRouter({mode:'hash',        //hash为默认值...
})