vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。路由模块的本质就是建立起url和页面之间的映射关系。
一个简单的完整路由
import Vue from 'vue'
import Film from '../views/Film.vue'
// 1. 导入官方提供的路由插件
import VueRouter from 'vue-router'
// 2. 注册路由插件
Vue.use(VueRouter)
// 3. 配置路由信息
const routes = [
{
path: '/films',
component: Film, // 单文件
}
]
// 4. 初始化路由插件并导出
const router = new VueRouter({
mode: 'hash',
routes
})
export default router
路由配置里的点点滴滴
路由根据实际应用场景的不同,在配置这块也会有很大的差别。
路由重定向通常用来过滤某些路由请求,例如某个路由下
- 一级路由
{
path: '/center',
component: Center // 单文件
}
- 二级路由
二级路由根据写法不同,可分为并列关系和嵌套关系(嵌套路由)
嵌套路由通常用来做选项卡的切换。类似于下图
{
path: '/films',
component: Film, // 单文件
children: [
{
path: '/films/nowplaying',
component: Nowplaying // 单文件
},
{
path: '/films/comingsoon',
component: Comingsoon // 单文件
} ]
}
- 路由重定向
路由重定向通常用来过滤路由,使用redirect关键字配置。
以下面代码为例,当页面输入/films/123,在films的二级目录下找不到/films/123该路由,但是一级路由是/films。那么就会找到路由3,这个时候路由重定向,路由会跳转到/films/nowplaying。也就是说/films/123 - > /films/nowplaying
{
path: '/films',
component: Film, // 单文件
children: [
{
path: '/films/nowplaying', //路由1
component: Nowplaying // 单文件
},
{
path: '/films/comingsoon', //路由2
component: Comingsoon // 单文件
},
{
path: '/films', //路由3
redirect: '/films/nowplaying'
}
]
}
- 动态路由
动态路由通常用来路由跳转的过程中传递参数,例如点击列表页某条数据,跳转到详细页。
定义动态路由:
{
path: '/detail/:myid',
component: Detail // 单文件
}
跳转到指定动态路由:
// 1- 跳转路径 携带参数
this.$router.push(`/detail/${id}`)
- 命名路由
命名路由是用一个名称来标识一个路由,当路由的另一种path方式有时候会名字很长的时候,用命名路由就显得很简单了。跳转路由的时候根据路由的名字name进行跳转
{
name: 'kerwindetail',
path: '/detail/:myid',
component: Detail // 单文件
}
// 2- 名字跳转
this.$router.push({
name: 'kerwindetail',
params: {
myid: id
}
})
路由跳转的几种方式
声明式跳转
声明式跳转一般用于html中,使用router-link组件。这里有两种写法
写法一(最新):
- to属性里配置跳转的路由地址
- custom表示支持自定义模板
- v-slot属性里配置固定值"{ navigate,isActive }",navigate表示单击绑定的事件function,由vue提供,我们不需了解;isActive 表示是否访问跳转后的路由,默认返回true,这个也是有vue提供,不用过多了解。
- router-link标签里的为插槽内容(自定义模板的具体html结构),即router-link组件最终渲染后的html结构。需要注意,绑定事件为固定"navigate",高亮显示通过isActive值进行设置。
<router-link to="/films/nowplaying" custom v-slot="{ navigate,isActive }">
<li @click="navigate" >
<span :class="isActive?'kerwinactive':''">正在热映</span>
</li>
</router-link>
总结一下:
vue提供:router-link, to,custom,v-solt,navigate,isActive。
我们提供:跳转的路由地址,自定义html结构,高亮显示效果
写法二(旧版):
<router-link to="/cinemas" active-class="kerwinactive" tag="li">cinemas</router-link>
编程式跳转
编程式跳转一般用于在js中,使用this.$router.push()方法来进行
this.$router.push(`/detail/${id}`)
路由拦截
我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断,从而达到路由拦截的效果。
to: Route: 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
确保要调用 next 方法,否则钩子就不会被 resolved
// 全局,在router/index.js里定义
router.beforeEach((to, from, next) => {
console.log(to.fullPath)
const persmisson = ['/order', '/money', '/card', '/center'] // 授权路径
if (persmisson.includes(to.fullPath)) {
// console.log('拦截')
// 登录成功过后, 后端返回加密后的token ,前端可以判断加密token是否有效,
if (localStorage.getItem('token')) {
next('/login') // 跳转到login 页面
} else {
next()
}
} else {
next()
}
})
局部拦截
export default {
// 路由的钩子函数 当进入组件之前,执行 beforRouteEnter 路由钩子函数。也就是说先执行beforRouteEnter,再执行beforeCreate
beforeRouteEnter (to, from, next) {
// console.log('beforeRouterEnter')
if (localStorage.getItem('token')) {
next()
} else {
next('/login') // 跳转到login 页面
}
},
beforeRouteLeave(to,from,next){//离开组件的时候触发
//什么都不写的时候,不会离开(走下一步)
next()
}
}
路由懒加载
等路径匹配后,再加载当前页面对应的js文件。主要用于解决首屏加载过慢问题。
{
path: '/cinemas',
component: () => import('../views/Cinema.vue') // 单文件
}