vue-router
1、vue-router如何响应 路由参数 的变化?
答:a.watch方法中监听
b.beforeRouteUpdate方法中监听
2、完整的 vue-router 导航解析流程
答:a、导航被触发。
b、在失活的组件里调用离开守卫。
c、调用全局的 beforeEach 守卫。
d、在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
e、在路由配置里调用 beforeEnter。
f、解析异步路由组件。
g、在被激活的组件里调用 beforeRouteEnter。
h、调用全局的 beforeResole 守卫 (2.5+)。
i、导航被确认。
j、调用全局的 afterEach 钩子。
k、触发 DOM 更新。
l、用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
3、vue-router有哪几种导航钩子( 导航守卫 )?
答:a、全局守卫: router.beforeEach
每个守卫方法接收三个参数:
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来resolve这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在router-link的 to prop或 router.push中的选项。
next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError()注册过的回调。
确保要调用 next方法,否则钩子就不会被 resolved。
b、全局解析守卫: router.beforeResolve
c、全局后置钩子: router.afterEach
d、路由独享的守卫: beforeEnter
e、组件内的守卫: beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave
4、vue-router的几种实例方法以及参数传递
答:$route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。
$router是“路由实例”对象包括了路由的跳转方法,钩子函数等。
5、vue-router的动态路由匹配以及使用
答:动态路径匹配:即把某种模式匹配到的所有路由,全都映射到同个组件。使用动态路由参数来实现。
例如,我们有一个 User 组件,对于所有ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在vue-router的路由路径中使用“动态路径参数”(dynamic segment)来达到这个效果。
const User = {
template: '<div>User</div>'
}
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
这样,像/user/foo和/user/bar都将映射到相同的路由。
一个“路径参数”使用冒号 :标记。当匹配到一个路由时,参数值会被设置到 this.$route.params,可以在每个组件内使用。
在 User 的模板,输出当前用户的 ID:
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
6、vue-router实现路由懒加载( 动态加载路由 )
答:第一步:定义一个能够被 Webpack 自动代码分割的异步组件。
const index = () => import('../page/list/index.vue');
第二步:在路由配置中什么都不需要改变,只需要像往常一样使用 index。
const router = new VueRouter({
routes: [
{ path: '/index', component: index,name:"index" }
]})
第三步:在build/webpack.base.conf.js下的output属性,新增chunkFilename。
output: {
path: config.build.assetsRoot,
filename: '[name].js',
//新增chunFilename属性
chunkFilename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
}
7、vue-router路由的两种模式
答:hash模式:
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
history模式:
如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
//设置mode属性,设置路由模式
const router = new VueRouter({
mode: 'history',
routes: [...]
})
不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问就会返回 404,这就不好看了。
所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。