前情提要
主要基于 vue-admin-element-ui
来进行辅助学习
为什么用它?
因为它相对来说复杂,实用,入手快,能快速得到成就感,同时在以后都可以用于生产环境进行
第一天先学习下vue-router
,主要是掌握一下基本的用法
例如
- 路由跳转
- 路由重定向
- 配置信息
- 路由初始化
- 路由配置
- 获取路由参数信息
- 获取路由的class和路由的匹配
- 等等常见的操作
这里的笔记,只是我个人的记录,因为我学习过,需要性的复习
配置别名
resolve: {
alias: {
'~': resolve(__dirname, 'src')
}
}
vue-router
导航
html
# <router-link> 默认会被渲染成一个 `<a>` 标签
<router-link to="/foo">Go to Foo</router-link>
路由跳转
this.$router.push('/')
this.$router.go(-1)
活动的路由
会自动设置class
: router-link-active
api学习
具体例子:见 https://router.vuejs.org/zh/api/#replace
- replace : 和
push
一样,但是不会留下history
记录 - append : 当前路径新增
- tag : 渲染成某种标签,如变成 span , li 等等
- active-class: 设置成活动的路由的class为
router-link-active
- exact: 精确匹配路由,例如: 当路径
<router-link to="/">
当前路由为http://www.baidu.com/
或者http://www.baidu.com
都会被匹配,加上exact
则只有第一个会被匹配。当当前路由为第一个时,会自动设置class 为router-link-active
- event: 有待学习,暂时没法了解
routes配置项
interface RouteConfig = {
path: string,
component?: Component,
name?: string, // 命名路由
components?: { [name: string]: Component }, // 命名视图组件
redirect?: string | Location | Function,
props?: boolean | Object | Function,
alias?: string | Array<string>,
children?: Array<RouteConfig>, // 嵌套路由
beforeEnter?: (to: Route, from: Route, next: Function) => void,
meta?: any,
// 2.6.0+
caseSensitive?: boolean, // 匹配规则是否大小写敏感?(默认值:false)
pathToRegexpOptions?: Object // 编译正则的选项
}
快捷操作
router.push(location, onComplete?, onAbort?)
router.push(location).then(onComplete).catch(onAbort)
router.replace(location, onComplete?, onAbort?)
router.replace(location).then(onComplete).catch(onAbort)
router.go(n)
router.back()
router.forward()
# 添加一个路由配置
router.addRoutes(routes: Array<RouteConfig>)
# 捕获路由错误
router.onError(callback)
$route.path
$route.params
$route.query
$route.hash :当前路由的 hash 值 (带 #) ,如果没有 hash 值,则为空字符串
$route.fullPath :完整路由
$route.matched : 路由纪律
$route.name
$route.redirectedFrom :如果存在重定向,即为重定向来源的路由的名字
导航守卫(类似于中间键一样的东西)
# 全局前置守卫
router.beforeEach((to, from, next) => {
// ...
})
全局解析守卫
在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。
全局后置钩子
router.afterEach((to, from) => {
// ...
})
组件内守卫
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
进度
vue-router复习大概耗时 一个半小时
参考文章
https://juejin.im/post/591aa14f570c35006961acac
手摸手,带你用vue撸后台 系列二(登录权限篇)
本文由 邓尘锋 创作,采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为: Mar 22, 2021 at 04:47 pm