上一章节讲解了vue-router
的基本使用,本章节来开始看看如何在路由中设置参数。
那么其中路由传递的参数有两种方式,如下:
/login?id=1
/login/1
那么继续使用上一篇的例子,给设置router-link
的路径设置参数。
设置参数的id=10,下面来到浏览器看看,如下:
或者直接在console
中输入vm
,如下:
都可以看到参数的id已经被探测到了。
在组件的生命周期函数created
中打印this.$route
对象,如下:
那么如果需要打印出id
的数据,只要这样写就可以了this.$route.query.id
,下面来试试。
浏览器打印参数如下:
好了,可以看到已经成功打印出参数了。
浏览器打印query的多个参数,如下:
可以从上面看到,已经可以获取多个query的参数了。那么如何在模板中使用呢?
浏览器显示如下:
可以看到在模板中是可以直接用this.$route
来获取参数的,其中在模板还可以省略this
,如下:
浏览器显示正常,如下:
params设置参数的路径示例:/register/:参数
上面这里先设置单个参数看看。
router-link
设置传递的params
参数
<router-link to="/register/10">注册</router-link>
可以看到,这里设置传递的参数为10,也就是id=10
那么能不能设置多个参数呢?
router-link
设置传递多个params参数
那么可以看到params
已经有多个参数值了。
params
参数
在浏览器显示如下:
可以看到已经可以在模板中展示params的参数了。