vue路由相关

路由懒加载:

官方文档解释:当打包构建应用时,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() 注册过的回调。


组件内守卫:


beforeRouteEnter 守卫 不能 访问 this,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

不过,可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。


注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。


嵌套路由:

通过children嵌套
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容