1.基本使用
- 安装vue-router，命令：
npm i vue-router
注意：新的vue-router 4只能在vue3中使用，vue-router3能在vue2中使用
用vue2可运行： npm i vue-router@3
main.js文件应用插件：`Vue.use(VueRouter)` （并引入路由文件）编写router配置项:
//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'
//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
meta:{isAuth:true,title:'详情'},//传递数据
}
]
})
//暴露router
export default router- 实现切换（active-class可配置高亮样式） 点击，实现光亮效果，点击添加“”里的类
router-link会别vue解析成a，可以当做a标签使用
<router-link active-class=”active” to=”/about”>About</router-link>
- 指定展示位置 （类似于：slot插槽，将指定的路由放到模板里）
<router-view></router-view>
2.多级路由（多级路由）
1. 配置路由规则，使用children配置项：
routes:[
{
path:'/about',
component:About,
},
{
path:'/home',
component:Home,
children:[ //通过children配置子级路由
{
path:'news', //此处一定不要写：/news
component:News
},
{
path:'message',//此处一定不要写：/message
component:Message
}
]
}2. 跳转（要写完整路径）：
<router-link to=”/home/news”>News</router-link>
3.路由接收query参数
父级路由传递：
<!-- 跳转并携带query参数，to的字符串写法 -->
<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:666,
title:'你好'
}
}"
>跳转</router-link>子级路由接收数据：
$route可获取到当前路由的信息
$route.query.id
$route.query.title
4.路由的params参数
1. 配置路由，声明接收params参数
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', //使用占位符声明接收params参数
component:Detail,
meta:{
isshow:false,//可通过false配置路由信息
}
}
]
}
]
}2. 传递参数
<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link
:to="{
name:'xiangqing',
params:{
id:666,
title:'你好'
}
}"
>跳转</router-link>3. 接收参数：
$route.params.id
$route.params.title
5.编程式路由导航
（1）replace属性
- 作用：控制路由跳转时操作浏览器历史记录的模式
- 浏览器的历史记录有两种写入方式：分别为
push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push - 如何开启
replace模式：<router-link replace .......>News</router-link>
（2）路由导航api
- 作用：不借助
<router-link>实现路由跳转，让路由跳转更加灵活
具体编码：
//$router的两个API
this.$router.push({
name:'xiangqing',
params:{
id:xxx,
title:xxx
}
})
this.$router.replace({
name:'xiangqing',
params:{
id:xxx,
title:xxx
}
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go(1) //可前进也可后退 和window.href.go()用法类似6.缓存路由组件：
- 作用：让不展示的路由组件保持挂载，不被销毁。
- 具体编码：
<keep-alive include="News">
<router-view></router-view>
</keep-alive>7.路由守卫
index中路由的配置：
通过配置存在meta对象中的isAuth，和title属性分别进行是否做权限判断，和路由标题显示
next()方法决定是否向下执行路由
//创建并暴露一个路由器
const router = new VueRouter({
routes:[
{
name:'guanyu',
path:'/about',
component:About,
meta:{isAuth:true,title:'关于'}
},
{
name:'zhuye',
path:'/home',
component:Home,
meta:{title:'主页'},
children:[
{
name:'xinwen',
path:'news',
component:News,
meta:{isAuth:true,title:'新闻'},
/* beforeEnter: (to, from, next) => {
console.log('前置路由守卫',to,from)
if(to.meta.isAuth){ //判断是否需要鉴权
if(localStorage.getItem('school')==='atguigu'){
next()
}else{
alert('学校名不对，无权限查看！')
}
}else{
next()
}
} */
},
{
name:'xiaoxi',
path:'message',
component:Message,
meta:{isAuth:true,title:'消息'},
children:[
{
name:'xiangqing',
path:'detail',
component:Detail,
meta:{isAuth:true,title:'详情'},
}
]
}
]
}
]
})
//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
console.log('beforeEach',to,from)
if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
next() //放行
}else{
alert('暂无权限查看')
// next({name:'guanyu'})
}
}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'
}
})//全局配置标题独享守卫:
在routes:配置中单独的配置路由守卫
beforeEnter(to,from,next){
console.log('beforeEnter',to,from)
if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
if(localStorage.getItem('school') === 'atguigu'){
next()
}else{
alert('暂无权限查看')
// next({name:'guanyu'})
}
}else{
next()
}
}组件内守卫：
通过路由规则，进，出入该组件时被调用
//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
}8.路由器的两种工作模式
在index配置文件里：
暴露的router路由，有两种工作模式：
const router = new VueRouter({
mode:'history',//或者mode:'hash'
routes:[]//配置路径
})- 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
- hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
- hash模式：
- 地址中永远带着#号，不美观 。
- 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
- 兼容性较好。
- history模式：
- 地址干净，美观 。
- 兼容性和hash模式相比略差。
- 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
