什么是路由?
一个路由(route)就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。
前端路由:key是路径,value是组件。
一、基本使用
1.安装vue-router
npm i vue-router
2.应用插件(mian.js)
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实例对象,去管理一组一组的路由规则
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})
注意:我们将所有的路由组件放在pages中,components中存放普通组件。
4.实现切换
<router-link active-class="active" to="/about">About</router-link>
使用active-class可配置高亮样式。router-link最终会解析成为a标签。
5.指定展示位置
<router-view></router-view>
注意:
1.多级路由使用children配置项。
2.多级路由写路径时需要写完整。
3.当路由切换时,路由是被销毁了。
4.每个组件都有自己的$route属性,里面存储着自己的路由信息。
5.整个应用只有一个router,可以通过$router属性获取到。
二、路由传参
1.query参数
传递参数
<!-- 跳转并携带query参数,to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
<!-- 跳转并携带query参数,to的对象写法 -->
<router-link
:to="{
path:'/home/message/detail',
query:{
id:001,
title:'消息'
}
}"
>跳转</router-link>
接收参数
$route.query.id
$route.query.title
2.params参数
配置路由,声明接收params参数
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', //使用占位符声明接收params参数
component:Detail
}
]
}
]
}
传递参数
<!-- 跳转并携带params参数,to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
<!-- 跳转并携带params参数,to的对象写法 -->
<router-link
:to="{
name:'xiangqing',
params:{
id:001,
title:'消息'
}
}"
>跳转</router-link>
特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置!
使用name命名的路由被称为命名路由,可以简化路由的跳转。
例:
<!--简化前,需要写完整的路径 --> <router-link to="/demo/test/welcome">跳转</router-link> <!--简化后,直接通过名字跳转 --> <router-link :to="{name:'hello'}">跳转</router-link> <!--简化写法配合传递参数 --> <router-link :to="{ name:'hello', query:{ 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
}
}
}
三、路由的相关知识
1.<router-link>的replace属性
作用:控制路由跳转时操作浏览器历史记录的模式
浏览器的历史记录的写入方式:push和replace
push:追加历史记录,默认是push模式
replace:替换当前记录
开启replace模式:<router-link replace >News</router-link>
2.编程式路由导航
作用:不借助<router-link>实现路由跳转,让路由跳转更加灵活
指定路径跳转:
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() //值是一个数字,正数向前跳转,负数向后跳转
3.缓存路由组件
作用:让不展示的路由组件保持挂载,不被销毁。
<keep-alive include="News">
<router-view></router-view>
</keep-alive>
注意:不在include中注明需要缓存的组件会将包裹的所有路由组件进行缓存。
4.新的生命周期钩子
作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态。
activated() {
console.log('News组件被激活了')
this.timer = setInterval(() => {
console.log('@')
this.opacity -= 0.01
if(this.opacity <= 0) this.opacity = 1
},16)
},
deactivated() {
console.log('News组件失活了')
clearInterval(this.timer)
},
适用于缓存路由中的定时器的开启与关闭。
5.路由守卫
作用:对路由进行权限控制
1.全局守卫
//全局前置守卫:初始化时执行、每次路由切换前执行
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'
}
})
2.独享守卫
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()
}
}
3.组件内守卫
//进入守卫:通过路由规则,进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫:通过路由规则,离开该组件时被调用
beforeRouteLeave (to, from, next) {
}
6.路由器的工作模式
路由器中有两种得到url的模式,即hash模式和history模式。hash值包含在HTTP请求中,即hash值不会带给服务器。
-
hash模式:
-
地址中永远带着#号,不美观 。
-
若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。
-
兼容性较好。
-
-
history模式:
-
地址干净,美观 。
-
兼容性和hash模式相比略差。
-
应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。
-