xinggevip

Vue2.x Cli3.x复用router-view
router.jsexport const router = new Router({ mode: 'hist...
扫描右侧二维码阅读全文
28
2019/05

Vue2.x Cli3.x复用router-view

router.js

export const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,

  routes:[
    {
      path: '/',
      name: 'home',
      components: {
        default:Home,
        'contect':Contect,
        'delivery':Delivery,
        'order':Order,
      }
    },
})

App.vue

<template>
  <div id="app">
    <!-- 使用组件 -->
    <div class="container">
      <appHeader></appHeader>
    </div>
    <div class="container">
      <!-- 显示路由组件 -->
      <router-view/>
    </div>
    <br>
    <div class="container">
      <div class="row">
        <div class="col-sm-12 col-md-4">
          <router-view name="contect"></router-view>
        </div>
        <div class="col-sm-12 col-md-4">
          <router-view name="delivery"></router-view>
        </div>
        <div class="col-sm-12 col-md-4">
          <router-view name="order"></router-view>
        </div>
        
      </div>
    </div>

    
    
  </div>
</template>
<script>
// 导入组件
import Header from "./components/Header.vue"
export default {
  // 注册组件
  components: {
    "appHeader":Header
  }
}
</script>

<style>

</style>
Last modification:May 28th, 2019 at 10:08 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment