左侧导航栏固定，点击进行路由跳转右侧部分显示不同内容

最新推荐文章于 2024-09-05 23:30:31 发布

小小红色无花果

最新推荐文章于 2024-09-05 23:30:31 发布

阅读量2.3k

点赞数 1

文章标签：前端 javascript 网络

本文链接：https://blog.csdn.net/weixin_45096939/article/details/128737785

版权

路由跳转的方法：this.$router.push(' 定义的路由名 ')；

在router中定义路由名称时可以用children定义子级路由；

<router-view />表示路由占位，在路由占位的时候可以把路由写活。

效果如下：

头部和左侧的导航栏不动，点击左侧导航栏中的按钮右侧的内容发生变化。

代码如下：

src / router / index.js

const routes = [
  {
    path: '/',
    name: 'layout',
    component: LayoutView,
    children: [{
      path: 'home',
      name: 'Home',
      component: () => import('../views/HomeView.vue')
    },
    {
      path: 'about',
      name: 'About',
      component: () => import('../views/AboutView.vue')
    },
  ]
  },
]

src / layout / LayoutView.vue

<template>
  <div class="layout">
    <div class="layout-box">
      <el-container>
        <el-header>左侧菜单路由跳转</el-header>
        <el-container>
          <el-aside width="200px">
            <el-button @click="togo('home')">to home</el-button>
            <el-button @click="togo('about')">to about</el-button>
          </el-aside>
          <el-main>
              <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  name: "LayoutView",
  methods: {
    togo: function (value) {
      this.$router.push(value);
    },
  },
};
</script>

<style>
*{
    margin: 0;
    padding: 0;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
.layout-box .el-container{
    height: 100% !important;
    background-color: red;
}

</style>

src / views / AboutView.vue

<template>
  <div class="about">
    <h1>about what?</h1>
  </div>
</template>

src / views / HomeView.vue

<template>
  <div class="home">
    <div class="home-box">welcome to home,we are family!</div>
  </div>
</template>

<script>
export default {}
</script>
<style scoped>
  .home-box{
    width: 300px;
    height: 100px;
    background-color: #009b7b;
    color: blue;
  }
</style>