Vue-Router
router-link匹配成功将自动添加class .router-link-active
vue-router
- 获取动态路由传值在this.$route.params
- query传值在this.$route.query获取
- 编程式导航路由
- this.$router.push({path:’/’})
- 命名路由,配置路由的时候添加name,跳转时使用this.$router.push({name:’’})
- 默认为hash,如果要改为history,在实例化VueRouter的时候添加mode:‘history’
- 在编程式导航中如果提供了path,params会失效,可以使用命名路由或者写完整的path
- this.$router.replace进行替换
- this.$router.go
- 嵌套路由
- 在配置路由时添加children为一个数组,然后继续配置路由即可
- 当路由从/user/foo导航到/user/bar,组件会被复用,意味着组件生命钩子函数不会被调用,可以监听
$route
变化,也可以使用beforeRouteUpdate
导航守卫
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}
- 同一路径匹配多个路由时,谁先匹配谁优先级高(与React-router中Switch相同)
- 使用通配符匹配时,$route.params会添加pathMatch为匹配的值
- 有时需要多个视图,而不是单独一个出口,那么可以为视图添加name进行命名,没有的为default
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
多个视图就要使用多个组件
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
- 嵌套命名视图(忽略了嵌套路由)
<!-- UserSettings.vue -->
<div>
<h1>User Settings</h1>
<NavBar/>
<router-view/>
<router-view name="helper"/>
</div>
{
path: '/settings',
// 你也可以在顶级路由就配置命名视图
component: UserSettings,
children: [{
path: 'emails',
component: UserEmailsSubscriptions
}, {
path: 'profile',
components: {
default: UserProfile,
helper: UserProfilePreview
}
}]
}
- 重定向可以为路径、命名路由,甚至可以为一个方法
const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
})
- 可以通过alias指定别名(当访问/b时与访问/a一样)
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
- 路由组件传参,设置路由props进行传参,如果是命名视图,那么就要为每个视图添加props属性(在组件中需要接收)
- 布尔模式,params会作为属性传入
- 对象模式,按原样作为组件属性
- 函数模式,接收route返回数据
vue-router进阶
- 全局前置守卫
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
在跳转前触发,一定要调用next方法,next(false)中断当前导航,next(’/’)或者next({path:’/’})等,当前导航被中断,进行新的导航,next(error)传入是一个Error实例,导航被终止,错误会被传递给route.onError()注册过的回调
- 全局解析守卫
使用router.beforeResolve注册,与beforeEach类似,在导航确认前(执行完这个守卫导航被确认),在所有组件内守卫和异步路由组件被解析之后
- 全局后置钩子
使用router.afterEach()全局创建,不接受next改变导航本身
- 也可以直接在路由配置上直接定义beforeEnter守卫
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
- 组件内守卫
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
可以给next传递回调,在确认时执行回调,组件实例作为回调的参数
// next(vm => {
// 通过 `vm` 访问组件实例
})
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
- 导航解析过程
- 导航被触发。
- 在失活的组件里调用离开守卫。
- 调用全局的
beforeEach
守卫。 - 在重用的组件里调用
beforeRouteUpdate
守卫 (2.2+)。 - 在路由配置里调用
beforeEnter
。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter
。 - 调用全局的
beforeResolve
守卫 (2.5+)。 - 导航被确认。
- 调用全局的
afterEach
钩子。 - 触发 DOM 更新。
- 用创建好的实例调用
beforeRouteEnter
守卫中传给next
的回调函数。
- 路由可以添加meta字段,作为路由元信息(登录验证可以用这个做)
- 路由过渡使用transition组件即可
- 获取数据可以在created生命周期或者beforeRouteEnter钩子
- Router实例可以添加scrollBehavior定义滚动行为,返回你想到达的滚动位置,也可以返回一个Promise达到异步滚动的目的
- 路由懒加载
const Foo = () => import('./Foo.vue')
有时需要将某个路由下的所有组件打包在同一个异步块,可以使用一个特殊的注释语法标注
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
UI框架(Github搜)
- element-ui 基于Vue PC端的UI框架
- mintUi 基于移动端的UI框架
有些不懂的,在github上看demo
- 组件可以按需引入(减少体积),如果用的多就没必要了