路径参数和查询参数作为页面之间的数据传递的一种方式，使用非常频繁。路径参数，望文生义意思是参数作为路径的一部分，在配置路由的时候把参数配置好，然后在浏览器中输入url时，必须传参，否则会找不到这个路由这个页面。例如，pageA页面的路由配置为：/pageA/:id/:name ，意思是pageA页面后面必须传一个id参数和name参数，这两个参数作为路径的一部分，必须传值。然后在pageA页面中用：this.$route.params 来获取所有的路径参数。
而查询参数则没有路径参数这么严格，路由不会对此做验证。路由参数在url中的表现为页面链接后面加 ?key=value&... ， 然后在页面中用：this.$route.query 来获取所有查询参数。如下图：
我们打印this.$route变量，看到如上图右边部分内容：
this.$route.name : 页面名字。这个name就是在router.js中配置的那个name, 这个name也是有大用处的，比如在<router-link>中使用“命名路由”的时候就是用到它，举例说明，通过在路由链接标签的to属性设置name和相应的参数，然后跳转效果和设置路由path是一样的：
<router-link :to="{ name: 'pageA', params: { id: 5188, name:'王大锤' }}">命名路由pageA</router-link>
this.$route.path: 路由路径，包含路径参数，不包含查询参数
this.$route.fullPath： 路由全路径，包含路径参数和查询参数
this.$route.query: 路径所有查询参数
this.$route.params: 路径所有路径参数
this.$route.meta: 路由元信息，在配置路由的时候可以把自定义的一些数据存在meta中，用作其他用途
this.$route.matched: 里面包含了路由的一些匹配信息
2.3 路由props设置及路径参数获取
在设置页面路由时，如果增加一个props属性，并设置为true, 则在页面中可以直接拿到参数，不需要通过this.$route.params来取参数。比如router.js中部分代码：
{ path: '/pageC/:id/:name', name: 'pageC', props: true, //设置props属性为true, 则可以在PageC页面中直接取参数 component: PageC }
在PageC页面中参数获取：
<template> <div> <h1>佛山 -- 黄飞鸿，from PageC </h1> <h3>男儿何不带吴钩，收取关山五十州</h3> <h3>路径参数id: {{this.id}}, name: {{this.name}}</h3> </div> </template> <script> export default { name: 'pageC', props: ['id', 'name'], //直接接收路径参数 created(){ console.log("id: ", this.id, ", name: ", this.name) } } </script>
2.4 嵌套路由。实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件。比如现在PageB页面中嵌入页面PageC, 则需要在PageB页面中增加一个路由视图<router-view>标签，作为嵌套页面PageC的占位符。
路由部分代码：
{ path: '/pageB', name: 'pageB', component: PageB, meta: { isOK: true, type: 9 }, children: [ { path: 'pageC/:id/:name', component: PageC, props: true, //设置props属性为true, 则可以在PageC页面中直接取参数 name: 'subPageC', meta: { requiresAuth: true, id: 51666 }, //自定义数据 } ] },
PageB页面中部分代码：
<template> <div> <h1>一片云 -- 罗小虎，from PageB </h1> <h3>千磨万击还坚劲，任尔东南西北风</h3> <!-- 嵌套路由，嵌套页面占位符 --> <router-view></router-view> </div> </template> <script> export default { name: 'pageB', created(){ console.log('...pageB...') console.log(this.$route) } } </script>
效果图：
2.5 编程式的导航。 <router-link>叫声明式导航，还有种编程式导航，格式为：router.push(location, onComplete?, onAbort?), 在页面中的使用例子：
// 字符串 router.push('home') // 对象 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', params: { userId: '123' }}) // 带查询参数，变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) /*注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。 取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path： */ const userId = '123' router.push({ name: 'user', params: { userId }}) // -> /user/123 router.push({ path: `/user/${userId}` }) // -> /user/123 // 这里的 params 不生效, 即编程式导航如果提供了path, 则路径参数必须写入path中。而查询参数可以不写入 router.push({ path: '/user', params: { userId }}) // -> /user
同样的编程式导航规则也适用于<router-link>导航组件的to属性