Vue-router 动态路由匹配

Posted 2022-08-12 the-last

Vue-router 动态路由匹配

路由参数变化

举例：

 

const router = new VueRouter(

  routes: [

       // 动态路径参数 以冒号开头，  /user/foo 和 /user/bar 都将映射到相同的路由

        path: ‘/user/:id‘, component: User

  ]

);

 

/user/:username/post/:post_id 多个路由变量，也都可以再 this.$route.params中获取

注意： 从 /user/foo 到 /user/bar组件会被复用，组件不会卸载再加载不会触发生命周期钩子，可以使用监听器监听 $route 观察路径变化，组件内作出正确的响应，2.2版本提供 beforeRouteUpdate 路由钩子使用此场景

 

匹配任意路径或导航到404

 

通配符 路由，有通配符路由的地址，应该放在路由配置后面，保证路由执行顺序

    // 会匹配所有路径，，用途：放在路由配置最后，，不管输入什么地址都是不在范围内，需要转到404

    path: ‘*‘

    // 会匹配以 `/user-` 开头的任意路径

    path: ‘/user-*‘

需要获取匹配到的路径的模糊字段值，可以从 params 中的 pathMatch 获取。

 

如果是 History模式，跳转到未知路径需要报404，因为history模式下路径会访问后端发器请求，需要后台服务配合解决404的场景。

 

 

高级匹配模式  和 匹配优先级

https://github.com/pillarjs/path-to-regexp#parameters path-to-regexp 匹配一个或多个，匹配一类等高级用法。

优先级:  匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。

 

 

嵌套路由 

 

路由组件配置中需要增加 children 字段，字段值结构还是和routes一一致，表示子路由路径。

在index入口的html结构中，div id为app的标签内使用增加了 <router-view></router-view> 这是顶层视图出口。

所以呢，，要想设置子路由路径跳转切换，就需要增加一个 <router-view> 新的路由出口，渲染在 children 所在的 component的 <router-view></router-view> 里。

可以path为空会定位到父级根路径。

 

编程式的导航

• this.$router.push(location, onComplete, onAbort)

普通的导航跳转是使用导航链接 <router-link>，也可以通过编写代码来实现同样的效果，this.$router.push 会向history路径栈中push一个路径，达到和 router-link一样的效果。注意： 路径上需要有对应的参数。
a 字符串

router.push(‘home‘)

b 对象

router.push( path: ‘home‘ )

c 命名的路由，变成 /user/123

router.push( name: ‘user‘,  params: userId: ‘123‘ )

router.push( path: `/user/$userId` )   只有这两种方式可以给router传 params。

以下方式调用无效！！！   变成  /user

router.push( path: ‘user‘,  params: userId: ‘123‘ )   

d 带查询参数，变成 /register?plan=private

router.push( path: ‘register‘, query: plan: ‘private‘ )   query 可以对应 path。

 

注意： 以上规则同时适用于  link  的  to 。

 

push   replace   修改路径时，会执行回调函数，onComplete（调用完成）  onAbort （路由终止）

• this.$router.replace(location, onComplete, onAbort)

replace 和 push 的区别不是很大，唯一的区别是它不会向history中添加新的记录，仅仅是替换掉当前history

 

• this.$router.go(Integer)

表示history记录中向前或向后进行多少步。 如果超过history中的步数会静默失败，不会到底!

 

命名视图

 

具名视图可以提供视图分块的效果，在同一路径下每个视图都对应不同组件，视图就是路由容器和展示模块。

<router-view></router-view>

<router-view name="a"></router-view>

<router-view name="b"></router-view>

视图嵌套：多层嵌套，多个视图的情况，需要注意 components 中组件的配置，和 router-view 中的name 对齐。

routes: [

   

       path: ‘/‘,

       components:     // 此处有component 单个组件和 多个组件 带有s的区别

           default: Bind,

           a: AccountManage,

           b: IMManage

       

   ]

 

 

重定向和别名

 

路径重定向：  参数类型支持 3 种，字符串，对象，函数返回值

   path: ‘/‘,

   redirect: ‘/newpath‘,

   redirect: name: ‘newpath‘ ,

   redircet: to =>

      // ....to 仅仅是当前路径对象的信息，不是路由守卫。

      return "/newpath/`$other`"

   

重定向是把一个路径替换成其他路径，渲染新的路径的组件，别名有所不同，设置别名访问路径和访问别名是一样的。不过，需要注意，alias别名的名称如果要覆盖已有路径规则，需要放在路径名的配置之前，因为优先级从前向后。

 

 

路由组件传参

 

在组件中直接使用 this.$route.params 会降低组件复用的灵活性，那咋办？

解耦，将变量以props的形式传递给组件。 也更加方便，组件的重用和测试。

 

大致有 3 种在路由配置中给组件传递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

       

    ]

)

props 除了使用bool型（会将params设置为组件的属性），还可以使用

对象型（使用对象型，对象作为组件的属性），

函数型（函数返回值作为组件的属性，必须尽量保证函数是纯函数，只在调用时返回给组件一个可靠的值）