路由懒加载:
官方文档解释:当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
1、该方法不常用,可以将异步组件定义为返回一个Promise的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身):
constFoo=()=>Promise.resolve({/* 组件定义对象 */});
2、在 Webpack 2 中,我们可以使用动态 import (opens new window)语法来定义代码分块点 (split point):
import('./Foo.vue')// 返回 Promise
结合两者,就能定义一个能被webpack自动代码分割的异步组件,在路由配置中无需改变
const Foo= ()=>import('./Foo.vue');
const router=new VueRouter({routes:[{path:'/foo',component:Foo}]});
动态路由及其传参:
定义动态路由:
将路由的路径配置为:path:‘/test/:id’,可设置多个路径参数如:path:‘/test/:id/datail/:datailId’
对应路由导航到的路由子组件下获取参数:
this.$route.params params将以对象的形式将参数传递过来如例一的parames为{id:xx},例二接收到的parames为{id:xx,datailId:xx}
路由跳转:
this.$router.push('/lay/67')
若跳转到一个命名路由还可以使用:
router.push({name:'user',params:{userId:123}})
组件间传值:
使用 props 将组件和路由解耦,
路由重定向:
“重定向”的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b
别名:/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。
注意:
当使用路由参数时,例如从 /user/foo 导航到 /user/bar(页面内导航时,通过更改Url跳转的方式组件会被销毁并且重新创建),原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。
如果想对路由参数的变化作出响应的话,你可以简单地 watch (监测变化) $route 对象
watch: {
$route(to, from) {
// 对路由变化作出响应...
console.log(to, from)
// to:即将要进入的目标 路由对象
// from:当前导航正要离开的路由
}
实际项目中,推荐使用路由导航守卫来处理此类问题:
全局导航守卫:
一般定义在router.js里,任何路由之间的跳转都会被监听到,分为前置守卫和解析守卫(2.5版本以上新增)以及后置钩子
在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。
路由独享守卫:
在路由配置上直接定义beforeEnter守卫(注意,路由独享守卫是beforeEnter,与全局前置守卫beforeach的方法参数相同)
只有路由独享守卫,没有前后置之分!!
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来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。
嵌套路由: