Vue动态路由：在一个页面获取上一个页面的传值
1：配置动态路由步骤：
const routes = [
//（main.js文件中）
在上一个页面中配置<router-link :to="'/Content/'+key">{{key}}---{{item}}</router-link>
2：在对应的页面
this.$route.params获取动态路由的值
代码示例：
传值页面：
<template> <div> <h1>这是新闻组件</h1> <ul> <li v-for="(item,key) in list" :key="key"> //:to="''+key"标识动态绑定key的值 <router-link :to="'/Content/'+key">{{key}}---{{item}}</router-link> </li> </ul> </div> </template> <script> export default { data(){ return{ aaa:'m,sh', list:['你好','这是新文艺','这是新思想'] } } } </script> <style lang="scss" scoped> h1{ color: skyblue; } </style> 获取值的页面：
<template> <div id="content"> <h1>我是详情页面</h1> </div> </template> <script> export default { data(){ return{ } }, mounted(){ console.log(this.$route.params)/* 获取动态路由传值 */ } } </script> <style lang="scss" scoped> </style> Get传值：
//传值页面 <template> <div> <br> <h2>这是一个首页组件</h2> <hr> <ul> <li v-for="(item,key) in list" :key="key"> <router-link :to="'/Product/?id='+key">{{key}}---{{item}}</router-link> </li> </ul> </div> </template> <script> import Bus from '../model/bus' export default { data(){ return{ msg:'Yes, a first Page!', title:'我是的数据NO.1', list:['商品已','商品丁','商品家'] } } } </script> <style lang="scss" scoped> h2{ color: red; } </style> 获取值的页面：
<template> <div id="product"> <h1>商品详情</h1> </div> </template> <script> export default { data(){ return{ } }, mounted(){ /* this.$route.query用于获取get传值 */ console.log(this.$route.query) } } </script> main.js页面：
文章来源: https://blog.csdn.net/W2457307263/article/details/88071819