Vue动态路由：在一个页面获取上一个页面的传值

1：配置动态路由步骤：

const routes = [

//（main.js文件中）

              { path: '/Content/:aid', component: Content }//动态路径参数以冒号开头

            ]

在上一个页面中配置<router-link :to="'/Content/'+key">{{key}}---{{item}}</router-link>

2：在对应的页面

this.$route.params获取动态路由的值

代码示例：

//main.js
import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import Home from './components/Home'
import News from './components/News'
import Content from './components/Content'
import Product from './components/Product'

/*定义路由 */
const routes = [
                { path: '/', component: Home },
                { path: '/Home', component: Home },
                { path: '/News', component: News },
                { path: '/Product', component: Product },//get传值
                { path: '/Content/:aid', component: Content }//动态路由
               
              ]
  // 实例化路由
  const router = new VueRouter({
    routes // （缩写）相当于 routes: routes
  })
Vue.use(VueRouter)
Vue.use(VueResource)

new Vue({
  el: '#app',
  // 将路由实例挂载到vue实例上
  router,
  render: h => h(App)
})

传值页面：

<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页面：

/*定义路由 */
const routes = [
                { path: '/', component: Home },
                { path: '/Home', component: Home },
                { path: '/News', component: News },
                { path: '/Product', component: Product },//get传值
                { path: '/Content/:aid', component: Content }//动态路由
               
              ]