Vue和Element UI 路由跳转，侧边导航的路由跳转

首先看布局，因为我的用于页面显示的 <router-view> 是通过重定向定位到登陆页的，然后通过登陆页跳转到主页。

在APP中代码：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

路由中代码：

使用重定向，将首页重新定位到登陆页。

const routes = [
  {
    path: '/',
    redirect: '/login',
  }
  ]

点击登陆按钮后，跳转的主页。是给登陆按钮添加事件，通过 this.$router.push(); 进行页面跳转：

<el-button type="primary" @click="submitForm()">
  登陆
</el-button>

  methods: {
    submitForm() {
      this.$router.push({ path: "/Homepage" });
    },
  },

PS: 使用 this.$router.push(); 时要注意 .push({ path: “/Homepage” }) 要写成这种样式，如果写成 .push("/Homepage" ) 会失效，我也不知道为什么

---

---

进入主页后，编写 侧边导航 ，我使用的是动态渲染的方法，这里仅展示一部分数据

<el-aside>
<el-menu background-color="#0080c9" 
		 text-color="#ffffff" 
		 router 
		 :default-active="this.$route.path">
              <!-- 动态渲染数据 -->
  <template v-for="submenu in menus">
    <el-submenu :index="submenu.id" :key="submenu.id">
      <template slot="title"> {{ submenu.title }} </template>
      <template v-for="menu in submenu.children">
        <el-menu-item :index="menu.routerTo" :key="menu.id">
          {{ menu.title }}
        </el-menu-item>
      </template>
    </el-submenu>
  </template>
</el-menu>
</el-aside>

data() {
  return {
    menus: [
      {
        title: "基础数据管理",
        id: "1",
        children: [
          {
            title: "用户管理",
            id: "1-1",
            routerTo: "/Homepage/UserManagement",
          },
          { title: "品项管理", id: "1-2" },
          { title: "品项类型管理", id: "1-3" },
          { title: "仓库管理", id: "1-4" },
        ],
      },
    ]
  }
}

需要注意的是如果要使导航栏可以进行路由跳转，

在 <el-menu> 中添加 router 属性
（router：是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转）

在 <el-menu> 中添加 :default-active=“this.$route.path” 属性
（:default-active：当前激活菜单的 index）PS:我不是很理解它的作用，但是添加上就可以实现

在 <el-submenu> 中的 index 属性值就是跳转的路径

还有因为主体内容显示需要放在标签页中，所以在标签页中设置了 <router-view> ,等会显示的页面会显示在这里，而且因为在初始化页面时就使用了 <router-view> 所以这里需要使用 命名视图

<!-- 主体内容 -->
<el-main>
  <!-- 标签栏 -->
  <el-tabs type="card" editable v-model="editableTabsValue">
    <!-- 首页标签 -->
    <el-tab-pane label="首页" name="/" :closable="false"></el-tab-pane>
  </el-tabs>

  <div class="contentBox">
    <router-view name="main"></router-view>
  </div>
</el-main>

路由代码：

要注意的是嵌套关系，因为要跳转的页面是在主页的中显示，所以是嵌套关系。

而且子组件是要显示在命名视图 <router-view name=main> 中，所以 component 属性要加 S 用 {视图名 : 组件名}
的形式

  // 主页
  {
    path: '/homepage',
    name: 'homepage',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "Homepage" */ '../views/Homepage.vue'),
    children: [
      {
        name: "UserManagement",
        path: "UserManagement",
        components: { main: UserManagement }
      }
    ]
  },