VUE-Router的知识点总结

一、动态路由匹配

形如:

const router = new VueRouter({ routes: [{ path: '/user/:id', component: User } ] })

后面的值就是动态匹配的参数,真正的路由值跳转到冒号之前的路径中,:后的值在this.$route.params中,可以在任意组件中被使用。
当只有:后的参数改变的时候,原来的组件实例会被复用,意味着组建的生命周期不会再被调用

如果此时想要对参数的变化做出响应,可以watch$router

二、编程式导航

在vue实例内部,可以通过$router访问路由实例,可以通过this.$push(...)俩进行页面跳转

跳转有两种方式:

声明式跳转:
编程式跳转:router.push(...)

参数可以是一个path路径,也可以包括params和query参数

router.push({ name: 'user', params: { userId: '123' }})
router.push({ path: 'register', query: { plan: 'private' }})

注意:如果提供path,则params会被覆盖,可以用以下两种方式替代

router.push({ name: 'user', params: { userId }}) // -> /user/123 router.push({ path: /user/${userId} }) // -> /user/123

router.replace和router.push区别:

push是向前推进一个页面(真正意义上的跳转,后退会返回当前页面),replace是替换当前页面(后退会返回当前页面的上一级)
router的API大体上和window.history很像,可以参考理解

三、路由优先级

当一个路由可以匹配多个路由的时候,此时,匹配的优先级俺找路由的定义标准,谁先定义的,谁的优先级就越高

四、路由嵌套

路由通常由:路由实例,路由表,components组成,在项目中这几部分可以按照需求进行拆分,从而有更清晰的结构,当我们需要在同级展示多个视图的时候,我们需要为router-view设置名字

当路由需要进行嵌套的时候,只需要在路由表的顶级路由中嵌套子路由即可,如下

{ path: '/settings', component: UserSettings, 
children: [
{ path: 'emails', component: UserEmailsSubscriptions }, 
{ path: 'profile', components:
 { default: UserProfile, helper: UserProfilePreview }
 }] }

渲染时:

User Settings

五、路由重定向

有时我们需要多个路径指向同一个视图,这时候就需要用到路由的重定向,一般在路由表的path后加一个redirect属性就可以做到

参数可以是相对路径:

const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] })

也可以是命名路由

const router = new VueRouter({ routes: [ { path: '/a', redirect: { name: 'foo' }} ] })

也可以是一个方法

const router = new VueRouter({ routes: [ { path: '/a', redirect: to => { // 方法接收 目标路由 作为参数 // return 重定向的 字符串路径/路径对象 }} ] })
路由重定向和路由别名的区别:

重定向是先访问到/a,然后路由会把页面重定向到/b,跳转了两次;别名是直接跳转到对应url,只经历一次跳转

六、路由组件传参

有时我们在进行路由跳转的时候,不可避免的会遇到需要传递参数的情况,这时候就需要利用路由进行传参,但在之前我们的参数都是通过$router.params来进行传递的,这样就造成了组件和URL过于耦合,组件只能在特定的url上使用,所以这时候我们就需要引入props进行解绑

const User = { props: ['id'], template: '
User {{ id }}
' } 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 } } ] })

七、路由守卫

路由守卫顾名思义,就是在路由进行跳转之前或之后进行的判断,参数或查询的改变并不会触发进入/离开的导航守卫,

它一般分为:全局

1.png

单个路由独享

2.png

组件

3.png
4.png

每个守卫方法都有三个参数

  • to: Route: 即将要进入的目标 路由对象
  • from: Route: 当前导航正要离开的路由
  • next: Function: 一定要调用该方法来 resolve 这个钩子

通常情况下登录路由守卫

5.png

你可能感兴趣的:(VUE-Router的知识点总结)