路由动态接收参数
上一章我们讲到路由静态的使用,本次我们讲路由动态的传值及获取值。 一、创建content.vue组件,输入以下内容: <template> <div id="content">{{msg}}</div> </template> <script> export default { data() { return { msg: "数据" }; },mounted(){ console.log(this.$route.params); } }; </script> 二、你一定还记得上章我们讲到注册路由,在哪个js注册呢?如果不记得,翻一下上一章我记录的。 替换title2.vue中的代码: <template> <div> <br> 将来的你会感谢现在拼命的你 <br> <ul> <li v-for=" (item,key) in list"> <router-link :to="'/content/'+key">{{item}}</router-link> </li> </ul> </div> </template> <script> export default { data(){ return{ msg:'zizujian', list:["aa","cccc","bbb"] } } } </script> *:to="'/content/'+key" 这就是动态传值的方式。