命名路由

<template>
    <div>
      這是商品列表頁面
      <router-link v-bind:to="{name: 'cart', params: {cartId: '123'}}">跳轉到購物車頁面</router-link>
    </div>
</template>

命名檢視

<template>
  <div id="app">
    <router-view class="main"/>
    <router-view class="left" name="image"></router-view>
    <router-view class="right" name="title"></router-view>
  </div>
</template>
 

const routes = [
  {
    path: '/',
    name: 'index',
    // 重定向
    redirect: 'goods',
    // 別名 怎麼都可以訪問到
    alias: '*'
  },
  {
    path: '/goods',
    name: 'GoodsList',
    components: {
      default: GoodsList,
      title: Title,
      image: Images
    },
    beforeEnter: (to, from, next) => {
      next()
    }
  },
  {
    path: '/cart/:cartId',
    name: 'cart',
    components: {
      default: Cart,
      image: Images
    }
  }
]