1. 动态匹配路由的基本用法

【应用场景】：通过动态路由参数的模式进行路由匹配。

var router = new VueRouter({routes: [// 动态路径参数 以冒号开头{ path: '/user/:id', component: User }]
})

即在路由规则中，把动态的部分在前面加上冒号（:），冒号就代表当前这个位置匹配的是动态参数，匹配成功后，在 User组件中就可以访问到当前匹配到的 id 值。

那么，如何来访问这个id值呢？请看下面的语法，我们是通过 $route.params 这个对象获取到这个动态匹配到的路由参数。

const User = {// 路由组件中通过 $route.params 获取路由参数template: '<div>User {{ $route.params.id }}</div>'
}

2. 路由组件传递参数

$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦。

2.1 props 的值为布尔类型

const router = new VueRouter({routes: [// 如果 props 被设置为 true，route.params 将会被设置为组件属性{ path: '/user/:id', component: User, props: true}]
})const User = {props: ['id'], // 使用 props 接收路由参数template: '<div> 用户 ID：{{ id }} </div>' // 使用路由参数
}

props: true：表示给这个规则开启了传参；
props: ['id'] ：定义了 id 这个路由参数。

2.2 props 的值为对象类型

const router = new VueRouter({routes: [// 如果 props 是一个对象，它会被按原样设置为组件属性{ path: '/user/:id', component: User, props: { uname: 'lisi', age: 12 }}]})const User = {props: ['uname', 'age'],template: ‘<div>用户信息：{{ uname + '---' + age}}</div>'
}

2.3 props的值为函数类型

const router = new VueRouter({routes: [// 如果 props 是一个函数，则这个函数接收 route 对象为自己的形参{ path: '/user/:id',component: User,props: route => ({uname: 'zs', age: 20, id: route.params.id })}]
})const User = {props: ['uname', 'age', 'id'],template: ‘<div>用户信息：{{ uname + '---' + age + '---' + id}}</div>'
}

注： ,props: route => 这里的 route 即是路由中的动态参数对象，:id中有几个参数项，则route中就有几个参数值。那么，在箭头函数的函数体中，可以返回一个props对象。 id 值就可通过route动态匹配:id 获取（id: route.params.id）

vue-router 动态路由匹配相关推荐

2022/9/5 嵌套路由(靠路由在vue里渲染套渲染)，动态路由匹配以及开启propos配置动态路由
嵌套路由通过路由实现组件的嵌套展示在about内嵌套路由 <template><div class="about-container"><h3&g ...
【VUE】Vue动态路由匹配路由
[VUE] vue-router 动态路由匹配我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那 ...
vue-router详尽：编程式导航、路由重定向、动态路由匹配、路由别名、嵌套路由、命名视图
vue-router编程式导航在vue项目中经常用到this.$router.push() 和 this.$router.replace() 方法进行路由跳转就是编程式导航... 通俗理解编程式导航 ...
vue将每个路由打包成html,Ant Design Vue pro 动态路由的实现和打包
Ant Design Vue pro 动态路由的实现和打包 Ant Design Vue pro 动态路由的实现和打包配置路由权限在config文件夹下router.config.js中配置路由权 ...
Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战前言一.什么是单页面应用及实现前端路 ...
面试考问Vue Router 的路由模式，这个回答令我直接出局！
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
你真的理解 Vue Router 的路由模式吗？
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
面试考问Vue Router 的路由模式，这个回答令我直接出局~
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
vue router children 路由变了组件没变_Vue.js从零开始——路由（2）
因为一些原因,我断更了几天时间,因为要准备面试 + 不在家,抱歉大家! 题图是一个大概的 Vue 模块化项目组成,当然因为我从网上找的,所以可以忽略当中的 Bulma,这其实是一个 CSS 框架,往简 ...
vue admin 动态路由权限管理
主要思路通过后端接口返回数据进行判断 (通过后端实现的权限管理有许多种),在这里我们主要通过关键字即匹配前端路由meta.menu值来实现权限管理通常会把路由权限列表存至vux中箭头所指的便 ...

vue-router 动态路由匹配

目录