路由传参-使用params方式传递路由参数|学习笔记

开发者学堂课程【Vue.js 入门与实战：路由传参-使用params方式传递路由参数】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/586/detail/8198

路由传参-使用params方式传递路由参数

内容介绍

一、 路由规则传参

二、 修改参数

一、路由规则传参

Var router =new vuerouter({
Routes:[
{path:’/login/:id’, component: login},
{path:’/register’, component: register } 
]
})
<router-link to="/login/12”/is >登录</router-link>
<router-link to="/register">注册<router-1ink>
<router -view></ router-view>
</div>

此时右键浏览，可以正常展示：

接下来实践，把解析到的 id 放到网页当中去。

通过分析，可以发现， id 12 之所以能被解析出来，是因为 matched ，在 matched 内部有一个路由匹配规则， path 是自己手写的， matched 把 path 内部预解析成了表达式。用表达式继续去解析 fullpath ，接续出来的结果，可以给到 params 。

如果想要拿到 id 这个shuju，需要通过如下代码：

created（）{//组件的生命周期钩子函数
console.log(this.$route.parama.id)
}
}
var login={
template: ‘<h1>登录--- {{$route.parama.id}}--- {{ $route.params.name}} </h1> ’，

 此时执行发现已经可以正常传递了。

二、修改参数

把在login中的登录里面的--- {{$route . query id }} --- 1 Sroute . query . name}}删掉，在把router-vue中登录的？id=10&name=zs删掉。在第二传参中，把规则改一下，把path里面的login后面添加/：id，在后面就当作id把它解析出来，在跳转的时候在后面跟一个id号。

执行发现不可匹配。

把console.og（this.$router） 放出来，在到前端去看看：（图形如下：）

想要显示出id来，把console.og（this.$router）改为这个console.og（this.$router.params.id）。

将来在开发中，两种传参方式都可以使用，主要依据个人喜好选择即可。