16.动态路由传值和get传值
1.动态路由传值
1.在components目录下新建vContent.vue组件
<template>
<div>
<h2>{{msg}}</h2>
</div>
</template>
<script>
export default {
data () {
return {
msg:'详情组件',
}
},
methods:{
},
mounted(){
console.log(this.$route.params);//获取动态路由传值
}
}
</script>
<style lang="scss" scoped>
h2{
color: red;
}
</style>2.在main.js中
加入：
{path:'/vcontent/:aid',component:vContent}, //动态路由main.js：
import Vue from 'vue';
import App from './App.vue';
import VueResource from 'vue-resource';
Vue.use(VueResource)
import VueRouter from 'vue-router';
Vue.use(VueRouter)
// 1.创建组件，导入组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import vContent from './components/vContent.vue';
// 2.配置路由
const routes=[
{path:'/home',component:Home},
{path:'/news',component:News},
{path:'/vcontent/:aid',component:vContent}, //动态路由
{path:'*',redirect:'/home'} //默认路由跳转到首页
]
//注意，这里是routes，而不是routers
// 3.实例化VueRouter
const router=new VueRouter({
routes//(缩写)相当于routers:routers
})
// 4.挂载
new Vue({
el: '#app',
router,
render: h => h(App)
})
// 5.将<router-view></router-view>放在App.vue里面3.在News.vue中
<template>
<div>
<h2>{{msg}}</h2>
<ul>
<li v-for="(item,index) in list" :key=index>
<router-link :to="'/vcontent/'+index">
{{index}}---{{item}}
</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'news',
data () {
return {
msg:'新闻组件',
list:['111','222','333']
}
},
methods:{
},
}
</script>
<style lang="scss" scoped>
h2{
color: red;
}
</style>
动态路由传值：
1.配置动态路由
配置路由
const routes=[
{path:'/vcontent/:aid',component:vContent}, //动态路由
]2.在对应的页面
this.$route.params //获取动态路由传过来的值2.get传值
1.在components目录下新建Goods.vue组件
<template>
<div>
<h2>{{msg}}</h2>
</div>
</template>
<script>
export default {
name: 'goods',
data () {
return {
msg:'商品详情',
}
},
methods:{
},
mounted(){
console.log(this.$route.query);
}
}
</script>
<style lang="scss" scoped>
h2{
color: red;
}
</style>2.首页组件Home.vue
<template>
<div>
<h2>{{msg}}</h2>
<br>
<ul>
<li v-for="(item,index) in list" :key=index>
<router-link :to="'/goods?aid='+index">
{{index}}---{{item}}
</router-link>
</li>
</ul>
<br>
</div>
</template>
<script>
export default {
name: 'home',
data () {
return {
msg:'首页组件',
list:['商品111','商品222','商品333']
}
},
methods:{
},
components:{
}
}
</script>
<style lang="scss" scoped>
h2{
color: red;
}
</style>3.在main.js中引用配置
import VueResource from 'vue-resource';
Vue.use(VueResource)
import VueRouter from 'vue-router';
Vue.use(VueRouter)
// 1.创建组件，导入组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import vContent from './components/vContent.vue';
import Good from './components/Goods.vue';
// 2.配置路由
const routes=[
{path:'/home',component:Home},
{path:'/news',component:News},
{path:'/vcontent/:aid',component:vContent}, //动态路由
{path:'*',redirect:'/home'}, //默认路由跳转到首页
{path:'/goods',component:Good},
]
//注意，这里是routes，而不是routers
// 3.实例化VueRouter
const router=new VueRouter({
routes//(缩写)相当于routers:routers
})
// 4.挂载
new Vue({
el: '#app',
router,
render: h => h(App)
})
// 5.将<router-view></router-view>放在App.vue里面注意，别忘了在根组件App.vue中引用
<template>
<div id="app">
<h2>{{msg}}</h2>
<router-view></router-view>
<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg:'根组件'
}
},
methods:{
},
}
</script>
<style>
</style>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-10-19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录