VUE动态路由传值

周大胖子

动态路由：
1.配置动态路由，在 main.js文件中 【备注：动态路由参数以冒号开头】

1. const routes = [
2.   { path: '/home', component: Home },
3.   { path: '/news', component: News },
4.   { path: '/info/:id', component: Info },
5.   { path: '*', component: Home }, //默认首页
6. ]

复制代码

2.在 news 组件中放入跳转的参数【就是跳转之前的组件】

1. <li v-for="(item,key) in list">
2.               <router-link :to="'/info/'+key">{{item}}</router-link>
3.           </li>

复制代码

3.在 info组件中利用 this.$route.params  接收传递来的参数，注意生命周期【就是跳转后的组件】

1. ,mounted(){       //在组件加载的时候就接收
2.       console.log(this.$route.params)
3.   }

复制代码

咳咳 下面拓展一下 传两个值怎么写

1. <router-link :to="'/info/'+key +'/'+item">{{item}}</router-link>

复制代码

1. { path: '/info/:id/:name', component: Info },

复制代码

周大胖子

还可以利用 git 传值，那就不用在 main.js 中改了，而是直接 拼接原始的 get字符串键值对拼接；然后，在 info 页面利用

1. // console.log(this.$route.query)

复制代码

获取get 传递来的数据