Vue router 命名视图 命名路由

命名路由

<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
    }
  }
]