- 主要针对笔者在学习中遇到的一些疑问进行记录
Vue Study
Prop
-
slot
父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译
-
keep-alive
要求被切换到的组件都有自己的名字，不论是通过组件的name选项还是局部/全局注册；
Prop
include：字符串或者正则表达式，只有匹配的组件会被缓存
exclude:字符串或者正则表达式，任何匹配的组件都不会被缓存
用法:
- 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition相似，keep-alive是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
- is特性:
Vuex
- action 提交的是 mutation，而不是直接变更状态。
- action 可以包含任意异步操作。
- action 通过 store.dispatch 方法触发。
Vue Router
- this.$route.query 路由查询字符串
- this.$route.hash 路由的hash值
- this.$route.params 路由的的参数
- router.push({ name: 'user', params: { userId }}) == router.push({ path:
/user/${userId}})
- 使用props将组件和路由解耦
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
props: true
},
// 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
- History模式
正常情况下都需要后端配合着使用
- node js 使用的是connect-history-api-fallback
导航守卫
- router.beforeEach 注册一个全局前置守卫
router.beforeEach((to,from,next)=>{
//...
})
1.next:Function 一定要通过调用该方法来resolve这个钩子。执行结果依赖next方法的调用参数；
2.next()进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed;
3.next(false)中断当前的导航。如果浏览器的URL改变了,那么URL地址会重置到from路由对应的地址；
4.next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个
新的导航。你可以向 next传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的
选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
5.next(error): 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传
递给 router.onError() 注册过的回调。
6.确保要调用 next 方法，否则钩子就不会被 resolved
-
router.beforeResolve 注册一个全局守卫,这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用
-
全局后置钩子:这些钩子不会接受next函数也不会改变导航本身
-
路由独享的守卫 beforeEnter
-
组件内的守卫:
beforeRouteEnter(to,from,next)
在渲染该组件的对应路由被confirm前调用，不能访问组件实例this,因为当守卫执行前，组件实例还没被创建
- beforeRouteUpdate (to,from,next)
在当前路由改变，但是该组件被复用时调用，可以访问组件实例this,
eg： 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
- beforeRouteLeave(to,from,next)
导航离开该组件的对应路由时调用，可以访问组件实例this
完整的导航解析流程
- 导航被触发。
- 在失活的组件里调用离开守卫。
- 调用全局的 beforeEach 守卫。
- 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
- 在路由配置里调用 beforeEnter。
- 解析异步路由组件。
- 在被激活的组件里调用 beforeRouteEnter。
- 调用全局的 beforeResolve 守卫 (2.5+)。
- 导航被确认。
- 调用全局的 afterEach 钩子。
- 触发 DOM 更新。
- 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
路由元信息
- 常常被用来验证登录权限以及设置页面的title
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar,
// a meta field
meta: {
requiresAuth: true,
title：'Bar page'
}
}
]
}
]
})
一个路由匹配到的所有路由记录会暴露在route对象的route.matched数组
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (!auth.loggedIn()) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // 确保一定要调用 next()
}
})
数据获取
- 导航完成之后获取
先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。
- 导航完成之前获取
导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。
从技术角度讲，两种方式都不错 —— 就看你想要的用户体验是哪种。
网友评论