在vue项目中，点击导航栏如何在当前页面刷新内容而不改变侧边栏和头部呢?

作者站长头像
站长
· 阅读数 9

部分菜单栏：

 <!-- 菜单栏 -->
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;float: left;position: relative;">
      <el-radio-button :label="false" style="display: block;">展开</el-radio-button>
      <el-radio-button :label="true" style="display: block;">收起</el-radio-button>
    </el-radio-group>
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
      :collapse="isCollapse" style="position:absolute;top:150px;z-index: 10;">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">基础数据管理</span>
        </template>
        <el-menu-item-group>
          <span slot="title">质量分析</span>
          <el-menu-item index="1-1">产线良率</el-menu-item>
          <el-menu-item index="1-2">返修产线良率</el-menu-item>
          <el-menu-item index="1-3">托盘良率</el-menu-item>
          <el-menu-item index="1-4">工站良率</el-menu-item>
          <el-menu-item index="1-5">返修工位良率</el-menu-item>
        </el-menu-item-group>

想实现点击某个导航，能在当前页面替换原有的内容，呈现新内容

回复
1个回答
avatar
test
2024-07-13

不要让更新全部的就行1,安装Vue Router

npm install vue-router --save

2,在main.js中引入Vue Router并设置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact },
    { path: '/blog', component: Blog }
  ]
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

3,在导航栏组件中使用router-link标签来实现路由跳转

<el-menu-item index="1-1">
  <router-link to="/blog">Blog</router-link>
</el-menu-item>

4,在App.vue组件中使用router-view标签来显示当前路由的组件内容

<template>
  <div id="app">
    <Header />
    <div class="container">
      <Sidebar />
      <div class="main">
        <router-view></router-view>
      </div>
    </div>
    <Footer />
  </div>
</template>

这样，当你点击导航栏中的某个链接时，路由会根据路径自动切换到对应的组件，并在当前页面替换原有内容呈现新内容。同时，侧边栏和头部组件仍然保持不变。带入修改下试试!

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容