Vue-router 外掛的使用

一、動態路由配置

     通過在路徑上使用  /:變數  的方式去實現，例如：

export default new Router({
  mode: 'history', // 路由模式 hash | history
  routes: [
    {
      path: '/goods/:goodsId/user/:name',
      name: 'GoodsList',
      components: {
        default: GoodsList,
        title: Title,
        img: Image
      }
    },
  ]
})

二、 巢狀路由配置

        新增children來配置子路由

export default new Router({
  mode: 'history', // 路由模式 hash | history
  routes: [
    {
      path: '/goods/:goodsId/user/:name',
      name: 'GoodsList',
      components: {
        default: GoodsList,
        title: Title,
        img: Image
      },
      children: [
        {
          path: 'title',
          name: 'title',
          component: Title
        },
        {
          path: 'image',
          name: 'image',
          component: Image
        }
      ]
    },
    {
      path: '/cart/:cartId',
      name: 'cart',
      component: Cart
    }
  ]
})

三、程式設計式路由的實現

    通過使用JavaScript程式碼的方式實現路由跳轉

<template>
    <div>
        這是商品列表頁面
        <span>{{ $route.params.goodsId }}</span><br>
        <span>{{ $route.params.name }}</span>
        <router-link to="/goods/title">顯示商品標題</router-link>
        <router-link to="/goods/image">顯示商品圖片</router-link>
        <div>
            <router-view></router-view>
        </div>
        <router-link :to="{name: 'cart',params: {cartId: '123'}}">跳轉到購物車頁面</router-link>
        <button @click="jump">button —— 跳轉到購物車頁面</button>
    </div>
</template>
<script>
export default {
  methods: {
    jump () {
      this.$router.push({path: '/cart?goodsId=123'})
    }
  }
}
</script>
<style>
</style>