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

Question

部分菜单栏：

 <!-- 菜单栏 -->
    <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>

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

Answer 1

还是重新看一下这个

https://router.vuejs.org/zh/guide/

现在的Vue项目基本都是题目问的那样, 下面是基本思路:

在router/index.js文件中定义路由：

import Vue from 'vue'
import Router from 'vue-router'
import HomePage from '@/components/HomePage'
import ContactPage from '@/components/ContactPage'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HomePage',
      component: HomePage
    },
    {
      path: '/contact',
      name: 'ContactPage',
      component: ContactPage
    }
  ]
})

在App.vue文件中定义导航栏并使用<router-view>标签显示页面内容：

<template>
  <div id="app">
    <header>
      <!-- 头部内容 -->
    </header>
    <nav>
      <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/contact">Contact</router-link></li>
      </ul>
    </nav>
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

在HomePage和ContactPage组件中定义页面内容就可以了

主要的就是这个:

Answer 2

组件形式的解（我看你大约需要这个）
主要是设计思路的问题，
主要有三个实现形式：
v-if-else（暴力切换）：每个页面做组件和路由一个思路暴力切换
compents（组件的数据覆盖）：内容差不多的情况下，通过 props 传递表格配置和请求接口
tabs（标签页切换）：tabs 的标签做成检索条件
具体怎么写应该知道的吧？


路由形式的解，
如果是这个版本的还是跟着Vue教程重新学习一下
页面大概这样写排版
Home.vue
div
    Nav
    Side
    router-view
路由大概这样配置：
router/index.js
{
     path: '/web', 
    component: Home,
    children: [
        { path: '/main', component: Main },
        { path: '/user', component: User },
    ]
},

Answer 3

不要让更新全部的就行
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>

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