Vue-Router(二) 动态路由

Vue-Router(二) 动态路由

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件(vue-router)
比如说一个商城的商品详情页面，详情页面是同一个页面，但是可以根据不同的商品id去展示每一个商品的详情，这时候就用到我们的动态路由
我们先看一下官网中动态路由的介绍：

模式	匹配路径	$route.params
/user/:username	/user/evan	{ username: ‘evan’ }
/user/:username/post/:post_id	/user/evan/post/123	{ username: ‘evan’, post_id: 123 }

$route 路由信息对象，表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录，不多说，有兴趣的小伙伴可以去
看一下点这里你就知道了，着重说一下动态路由的使用

首先在 components 目录下新建一个商品列表页面和一个商品详情页面，商品列表界面命名为 goodsList.vue 详情页面 goodsDetails.vue

goodsList.vue

    <template>
      <div>   //  商品列表
        <router-link class="q" to="/goodsDetail/商品0">商品 0</router-link>
        <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>

goodsDetails.vue

    <template>
      <div class="detail">
        // $route.params 包含了 动态片段 和 全匹配片段，就是说商品 id 会在这里面
        这是{{$route.params.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>

接下来我们来配置一下路由

    // 导入组件 和 依赖
    import Vue from 'vue'
    import Router from 'vue-router'
    import GoodsList from '@/components/goodsList'
    import GoodsDetail from '@/components/goodsDetails'
    // 告诉 vue 你要使用 route
    Vue.use(Router)
    // 定义路由配置项并导出
    export default new Router({
      mode: 'history',
      redirect: 'goodslist',
      routes: [
        {
          path: '/',
          name: 'goodslist',
          component: GoodsList
        },
        {
          path: '/goodsDetail/:id',
          name: 'goodsDetail',
          component: GoodsDetail
        }
      ]
    })

这样路由就配置好了，现在我们来运行它

npm run dev

至此，动态路由就可以使用了，以上代码亲测

本文纯手打，有不当之处请留言！谢谢！