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 }//动态路由
]
