vue 点击左侧菜单右侧视图切换

1.业务需求：

点击左侧的侧边栏菜单，希望只更新右侧的视图，实现这种局部更新的效果。

 这里就需要用到Vue的路由控制了。

 

2.实现：

2-1  在router.js中：

截图：

router.js完整代码：

 

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import center from '../views/center.vue'
import a from '../views/a.vue'
import b from '../views/b.vue'
import c from '../views/c.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/center',
    name: 'center',
    component: center, //这里是核心： center作为容器组件，包含左右菜单和右侧的router-view，所以下面的子组件实际是显示在router-view
    redirect: {name: "a"},   //输入路由center会重定向到a页面
    children:
      [
        {
          path: "/",
          name: "a",
          component: a,
          meta: {
            title: "页面a"
          }
        },
        {
          path: "b",
          name: "b",
          component: b,
          meta: {
            title: "页面b"
          }
        },
        {
          path: "c",
          name: "c",
          component: c,
          meta: {
            title: "页面c"
          }
        },
      ]
  }
]

const router = new VueRouter({
  routes
})

export default router

 

2-2  在src/views路径下创建 center.vue（容器组件），a.vue，b.vue，c.vue

2-3  center.vue:

<template>
  <div class="layout">
    <Layout>
      <!-- 侧边栏 -->
      <Sider hide-trigger :style="{ background: '#fff' }">
        <Menu
          @on-select="changeSidebar"
          :active-name="sidebarItem"
          theme="light"
          width="auto"
          :open-names="['center']"
        >
          <Submenu name="center">
            <template slot="title">
              <Icon type="ios-navigate"></Icon>
              个人中心
            </template>
            <MenuItem name="a">a页面</MenuItem>
            <MenuItem name="b">b页面</MenuItem>
            <MenuItem name="c">c页面</MenuItem>
          </Submenu>
        </Menu>
      </Sider>
      <!-- 右侧的视图 -->
      <Layout :style="{ padding: '24px' }">
        <Content>
          <!-- 右侧的视图核心 -->
          <router-view></router-view>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>
<script>
export default {
  name: "center",
  data() {
    return {
      sidebarItem: "",
    };
  },
  mounted() {
    this.sidebarItem = this.$route.name;
  },
  methods: {
    changeSidebar(name) {
      this.sidebarItem = name;
      this.$router.push({
        name: name,
      });
    },
  },
};
</script>

 

a.vue 内容为：

<template>
  <div>页面a</div>
</template>

<script>
export default {
  name: "a"
};
</script>

b.vue 内容为：

<template>
  <div>b页面</div>
</template>
<script>
export default {
  name: "b"
};
</script>

c.vue 内容为：

<template>
  <div>c页面</div>
</template>
<script>
export default {
  name: "c"
};
</script>

 

 

效果：