文章目录
一、介绍
一个路由就是一组映射关系（key - value）
key为路径，value为函数或者组件(VueComponent)
路由实现了页面区域刷新（本质上还是a标签）
npm i vue-router
路由组件放在 src/pages/ 下，
路由配置放在 src/router/index.js 下
二、命名式使用
?import VueRouter from ‘vue-router’
?Vue.use(VueRouter)
1.普通写法
<router-link to="/home/news">News</router-link>
------------------------------------------------------------------
<router-view></router-view>
2.携带参数
2.1 query
参数形式：?key=value&key=value …
<!-- 跳转并携带query参数，to的字符串写法（es6反引号） -->
<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">跳转</router-link>
<!-- 跳转并携带query参数，to的对象写法（推荐） -->
<router-link
:to="{
path:'/home/message/detail',
query:{
id: m.id,
title: m.title
}
}"
>跳转</router-link>
// 接受参数
$route.query.id
$route.query.title
2.2 params
参数形式：直接像路径一样写，但是路由中以 /:id/:title表示参数
结合下面第二行代码：id=666，title=’你好‘
<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
<!-- 跳转并携带params参数（不能用path，一定是name），to的对象写法 -->
<router-link
:to="{
name:'xiangqing',
params:{
id:666,
title:'你好'
}
}"
>跳转</router-link>
// 接受参数
$route.params.id
$route.params.title
3.路由的props
{
name:'xiangqing',
path:'detail/:id',
component:Detail,
//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
// props:{a:900}
//第二种写法：props值为布尔值，为true时，则把路由收到的所有 params 参数通过props传给Detail组件
// props:true
//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
props($route){
return {
id: $route.query.id,
title: $route.query.title
}
}
}
三、编程式路由导航（不用 router-link）
一些方法：push({}) 、replace({})、back()、forward()、go(n)
使用push直接跳转，和 router-link 的 to 差不多
// push 和 replace 一个是追加（router-link默认），一个是替换历史记录
this.$router.push({
name:'xiangqing',
params:{
id:xxx,
title:xxx
}
})
四、缓存路由组件和钩子
在更换路由时，旧路由（数据，运行中的方法等）会直接消失
1.缓存
防止input的输入丢失，keep-alive
弊端：如果有定时器类的处理，并不会暂停（可以用钩子解决）
// 缓存一个路由组件
<keep-alive include="News"> // include中写想要缓存的组件名，不写表示全部缓存
<router-view></router-view>
</keep-alive>
// 缓存多个路由组件
<keep-alive :include="['News','Message']">
<router-view></router-view>
</keep-alive>
2.钩子activated和deactivated
在启动了缓存的情况下，可以检测路由组件被激活和失活的状态，
以此来启动或关闭定时器任务
<script>
export default {
name:'News',
activated(){
console.log('News组件被激活了')
this.timer = setInterval(() => { },1000)
},
deactivated(){
console.log('News组件失活了')
clearInterval(this.timer)
}
}
</script>
五、路由守卫
作用：对路由进行权限控制
分类：全局守卫、独享守卫、组件内守卫
1.全局守卫
// 全局前置守卫：初始化时、每次路由切换前执行
router.beforeEach((to,from,next) => {
console.log('beforeEach',to,from)
if(to.meta.isAuth){ // 判断当前路由是否需要进行权限控制
if(localStorage.getItem('school') === 'atguigu'){ // 权限控制的具体规则
next() // 放行
}else{
alert('暂无权限查看')
}
}else{
next() // 放行
}
})
// 全局后置守卫：初始化时、每次路由切换后执行
router.afterEach((to,from) => {
console.log('afterEach',to,from)
if(to.meta.title){
document.title = to.meta.title //修改网页的title
}else{
document.title = 'vue_test'
}
})
2.独享守卫
beforeEnter(to,from,next){
console.log('beforeEnter',to,from)
if(localStorage.getItem('school') === 'atguigu'){
next()
}else{
alert('暂无权限查看')
}
}
3.组件内守卫
//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {... next()},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {... next()},
六、路由器（总）
src/router/index.js
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
//创建一个路由器
const router = new VueRouter({
routes:[
{
name:'guanyv', // params 对象传参必用
path:'/about',
component:About,
meta:{title:'关于'} // meta 可以存放任意信息
},
{
name:'zhuye',
path:'/home',
component:Home,
meta:{title:'主页'},
children:[ // 路由嵌套 用children
{
name:'xinwen',
path:'news',
component:News,
meta:{title:'新闻'},
// 独享守卫，本路由切换之后被调用
beforeEnter(to,from,next){
console.log('独享路由守卫',to,from)
if(localStorage.getItem('school') === 'atguigu'){
next()
}else{
alert('暂无权限查看')
}
}
},
{
name:'xiaoxi',
path:'message',
component:Message,
meta:{title:'消息'},
children:[
{
name:'xiangqing',
path:'detail',
component:Detail,
meta:{title:'详情'},
// props 就是让传过去的 id 被 $route.query.id 赋值
// Detail 组件也要用 props 接收
props($route){
return {
id:$route.query.id,
title:$route.query.title,
}
}
}
]
}
]
}
]
})
// 全局后置守卫，每个路由被切出时调用
router.afterEach((to,from)=>{
console.log('后置路由守卫',to,from)
document.title = to.meta.title || '硅谷系统'
})
//导出路由器
export default router
