1.定义用法
解决同一组件样式对应不同的用户渲染,只需写一个页面
2.代码
组件a:
<template>
<div>
// 商品列表
<router-link class="q" to="/goodsDetail/商品0">商品 0</router-link> //to来传id
<router-link class="q" to="/goodsDetail/商品1">商品 1</router-link>
<router-link class="q" to="/goodsDetail/商品2">商品 2</router-link>
<router-link class="q" to="/goodsDetail/商品3">商品 3</router-link>
<router-link class="q" to="/goodsDetail/商品4">商品 4</router-link>
<router-link class="q" to="/goodsDetail/商品5">商品 5</router-link>
<router-link class="q" to="/goodsDetail/商品6">商品 6</router-link>
<router-link class="q" to="/goodsDetail/商品7">商品 7</router-link>
<!-- <div>
<router-view></router-view>
</div>-->
</div>
</template>
<script type="text/ecmascript-6">
export default {};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.q {
display: block;
}
</style>
组件b来接收:
<template>
<div class="detail">
// $route.params 包含了 动态片段 和 全匹配片段,就是说商品 id 会在这里面
这是{{$route.params.id}}详情页面 //接收传的ID
</div>
</template>
<script type="text/ecmascript-6">
export default {};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.detail {
width: 200px;
height: 100px;
margin: auto;
}
</style>
router:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import GoodsList from '@/components/GoodsList'
import GoodsDetail from '@/components/GoodsDetails'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'goodslist',
component: GoodsList
},
{
path: '/goodsDetail/:id', //重点!就是绑ID
name: 'goodsDetail',
component: GoodsDetail
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router