【vue】点击导航菜单切换局部页面，打开展示默认栏目，页面刷新等问题

 非专业前端，局限性较高，有些问题看起来很小，但是初次接触很棘手，需要查找很多博客，内容也很杂。以下只是过程中总结下来的，要解决的就是标题中的三个问题。

这是我需要达成的效果。

1.第一个是进入导航菜单切换局部页面。

(1)在index.js中配置路由的时候作为导航页的子级。

(2)vue页面，<router-view/>他会根据当前地址栏的路径在<el-main>这个组件的位置上给你展示

相应的局部页面。

2.完成1之后，我们可以看到这个页面的基本结构如下图。

需要继续解决一些问题，问题一，进入页面的时候默认展示“订阅管理”这个子级的内容。问题二，在刷新的时候，选中的菜单不会改变（不会丢失）。

对于问题一，重定向。也就是在进入该页面之前重定向到某个子级。

第二个问题，刷新之后保持不变，就是让activeIndex始终指向当前地址栏这个路径。

3.贴代码

index.js:

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/menu',
      component: Menu,
      redirect: '/paper',
      children: [
        {
          path: '/paper',
          component: Paper
        },
        {
          path: '/user',
          component: User
        },
        {
          path: '/order',
          component: MyOrder
        }
      ]
    }
  ]
})复制

menu页面:

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          @select="handleSelect"
          router
          style="
            height: 100vh;
            border: 1px solid #eee;
            margin: 0;
            border: 0;
            padding: 0;
          "
        >
          <el-menu-item index="/paper">
            <i class="el-icon-notebook-2"></i>
            <span slot="title">订阅管理</span>
          </el-menu-item>
          <el-menu-item index="/user">
            <i class="el-icon-user-solid"></i>
            <span slot="title">个人信息管理</span>
          </el-menu-item>
          <el-menu-item index="/order">
            <i class="el-icon-s-order"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  name: "menu",
  data() {
    return {
      activeIndex: this.$route.path,
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
}
</script>复制