Vue-Router动态路由匹配

Vue-Router 动态路由匹配

1，路由参数变化(match 模式)举例：

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 路由钩⼦使⽤此场景

2，匹配任意路径或导航到404

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

// 会匹配所有路径，，⽤途：放在路由配置最后，，不管输⼊什么地址都是不在范围内，需要转到404 path: '*'}{

// 会匹配以 `/user-` 开头的任意路径 path: '/user-*'}

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

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

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

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

3，嵌套路由

路由组件配置中需要增加 children 字段，字段值结构⼀致，表⽰⼦路由路径。

在index⼊⼝的html结构中，div id为app的标签内使⽤增加了 这是顶层视图出⼝，⼀个 表⽰⼀个视⼝。

所以，如果需要实现 ⼦路由路径跳转切换，就要增加⼀个 作为新的路由视⼝，渲染在 children 所在的 component的 view> ⾥。

可以path为空会定位到⽗级根路径。编程式的导航

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

普通的导航跳转是使⽤导航链接 ，也可以通过编写代码来实现同样的效果，

this.$router.push 会向history路径栈中push⼀个路径，达到和 router-link⼀样的效果。注意： 路径上需要有对应的参数。传参⽅式: 4中字符串形式router.push('home')

对象

router.push({ path: 'home' })

命名的路由

router.push({ name: 'user', params: { userId: '123' }}) 会⾃动转换成 /user/123router.push({ path: `/user/${userId}` }) 只有这两种⽅式可以给router传 params。以下⽅式调⽤⽆效 变成 /user 因为不能是pathrouter.push({ path: 'user', params: { userId: '123' }})

带查询参数

router.push({ path: 'register', query: { plan: 'private' }}) query 可以对应 path。 转换为 /register?plan=private

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

push、replace 修改路径时，会执⾏回调函数，onComplete（调⽤完成） onAbort （路由终⽌）

this.$router.replace(location, onComplete ?, onAbort ?)replace 和 push 的区别：

唯⼀的区别是replace不会向history中添加新的记录，仅仅是替换掉当前history

this.$router.go(Integer)

表⽰history记录中向前或向后进⾏多少步。 如果超过history中的步数会静默失败。

4，路由命名视图

具名视图可以提供视图分块的效果，在同⼀路径下，对应多个视图不同组件的更新，⼀个components中设置的组件跳转。

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

path: '/',

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

a: AccountManage, b: IMManage } }]

5，重定向和别名

路径重定向： 参数类型⽀持 3 种，字符串，对象，函数返回值{ path: '/',

redirect: '/newpath', redirect: { name: 'newpath' }, redircet: to => {

// ....to 仅仅是当前路径对象的信息，不是路由守卫。 return \"/newpath/`${other}`\" }}

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

6，路由组件传参

在组件中直接使⽤ this.$route.params 会降低组件复⽤的灵活性，那咋办？解耦，将变量以props的形式传递给组件。 也更加⽅便，组件的重⽤和测试。

⼤致有 3 种在路由配置中给组件传递props的模式：布尔模式，对象模式，函数模式 {

path:'/newsinfo/:content', // 如果不想在地址栏展⽰参数可以不写content， // router.push(name, params) 可以传参，且不展⽰在URL。

name:'newsinfo', // router.push(path, query)，可以传参，格式是?content=value 会展⽰。 props:true,

component: () =>apply('NewsInfo')},

const User = { props: ['id'],

template: '

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设置为组件的属性），还可以使⽤对象型（使⽤对象型，对象作为组件的属性），

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