router-view的使用

目录

序言

在开发中，我们常需根据导航栏跳转到新页面，但是只需替换内容区域，其余保留不变。这就涉及到子路由的使用，router-view可以实现以上需求。

router-view是一个路由占位符，会自动根据路由的配置（index.js）自动匹配组件，展示在页面的router-view中。

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import HelloWorld from '../components/HelloWorld.vue'
import showData from '../views/showData.vue'
Vue.use(VueRouter)

const routes = [
 {
   path: '/',
   name: 'Home',
   component: Home,
   children: [{path:'/HelloWorld',component: HelloWorld},{path:'/showData',component: showData}]
 },
 {
   path: '/about',
   name: 'About',
   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
 }
]

const router = new VueRouter({
 routes
})

export default router
//组件Home中包含导航栏，因此导航栏中的路由作为子路由，配置在Home下

Home.vue

<template>
  <div>
    <el-container class="container">
          <el-header>Header</el-header>
        <el-container>
          <el-aside width="200px">
               <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b" router>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/HelloWorld">Hello</el-menu-item>
          <el-menu-item index="/showData">书籍数据</el-menu-item>
        </el-menu-item-group> 
      </el-submenu>

       <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航二</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group> 
      </el-submenu>

       <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航三</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group> 
      </el-submenu>
     
    </el-menu>
          </el-aside>
          <el-main>   
            <router-view></router-view>
          </el-main>
        </el-container>
    </el-container>
  </div>  
</template>
//el-menu中加入rounter属性开启路由
//index中配置路径