Vue-Router动态路由

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