开发者学堂课程【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)。
将来在开发中,两种传参方式都可以使用,主要依据个人喜好选择即可。