目录
步骤1：修改路由匹配规则 routes 里面的 path属性值
步骤2：在连接跳转处，修改 router-link的 to属性值
步骤1：修改 routes路由匹配规则 里面的 path属性值
一、前言
上一篇文章我们介绍了路由传参-使用query方式传递路由参数，详细可参考博文：原创 Vue笔记整理，专题之路由：5、路由传参-使用query方式传递路由参数 这篇博文我们将介绍：路由传参-使用params方式传递路由参数
二、使用params方式传递路由参数
1、路由实例简约版
之前介绍了路由的基本使用，现在我们继续写一个类似的简单实例，之前加了注释，这里之前的注释就不加了。
然后在它的基础上演示：使用 params方式传递路由参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>08.路由规则中定义参数</title>
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
var login = {
template: '<h1>登录组件</h1>'
}
var register = {
template: '<h1>注册组件</h1>'
}
var router = new VueRouter({
routes: [
{ path: '/login', component: login },
{ path: '/register', component: register }
],
})
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// router: router
router//如上面属性值和属性名完全一样，可以简写成这样。
});
</script>
</body>
</html>
2、使用params方式传递路由参数
步骤1：修改路由匹配规则 routes 里面的 path属性值
如下图：加了一个 :id
步骤2：在连接跳转处，修改 router-link的 to属性值
如下图：加了一个 /12
我们运行程序，点击登录进行切换，发现浏览器url地址多了一个 /12
说明修改以后：router-link的 to属性值 能和 routes 里面的 path属性值 能匹配上
那么怎么在组件内部拿到这个参数id呢？
步骤3：组件内部拿到这个参数id
组件有它的生命周期 ，我们在登录组件里面，写一个它的生命周期方法 created，并输出相关对象：
var login = {
template: '<h1>登录组件</h1>',
created() { // 组件的生命周期钩子函数
// this代表当前组件，$route 表示当前路由信息对象
console.log(this.$route)
}
}
运行程序，点击登录进行切换，检查元素，我们来看一下输出结果：
这个时候 query对象 里面没有值，因为我们没有用到上篇博文提到的方式，如下：
<router-link to="/login?id=10&name=zs">登录</router-link>
这时候的 id值 在 params里面。
然后我们可以这样来获取 id 的值：this.$route.params.id
var login = {
template: '<h1>登录组件</h1>',
created(){ // 组件的生命周期钩子函数
console.log(this.$route)
console.log(this.$route.params.id)
}
}
那么怎么把 id的值 放到 h1标签里面
步骤4：把 id的值 放到 h1标签里面
这个就不多说了，与query方式传递路由类似，只是把关键字更换为 params
运行程序，点击登录进行切换，我们来看一下效果
3、使用 params方式传递多个参数
步骤1：修改 routes路由匹配规则 里面的 path属性值
步骤2：修改 router-link的 to属性值
运行程序，点击登录进行切换，我们来看一下效果
注意：如果你只写一个参数，如下：
<router-link to="/login/12">登录</router-link>
这样运行程序，是匹配不上 routes路由匹配规则的。
4、修改后的最终代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>09.路由规则传参方式2_params</title>
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
<router-link to="/login/12/ls">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
var login = {
template: '<h1>登录组件---{{ $route.params.id }}---{{ $route.params.name }}</h1>',
created(){ // 组件的生命周期钩子函数
console.log(this.$route)
console.log(this.$route.params.id)
}
}
var register = {
template: '<h1>注册</h1>'
}
var router = new VueRouter({
routes: [
//:id 这个冒号是占位符。整个的意思是，将来这个位置要传入一个 id进来
//具体这个 id怎么来，需要具体地址 url进行解析得到
{ path: '/login/:id/:name', component: login },
{ path: '/register', component: register }
]
})
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// router: router
router
});
</script>
</body>
</html>
三、其他
1、有关 query和 params方式传递路由参数，这两种方式，使用哪种看个人使用习惯
2、运行程序，点击登录进行切换，检查元素，我们来看一下输出结果：
这个 params对象里面的值，是怎么来的？
在 matched 匹配对象里面，path是我们手动写的格式，在内部它会通过预解析成一个 regex形式的正则表达式，
然后用这个正则表达式去解析 fullPath对象，解析出来的结果就是我们的 params对象。