Vue 菜单路由（router）只替换对应主页面中内容，而不是整个home页面的router index.js的两种设置方法

在系统登录到系统主页面之后，通过点击不同的菜单动态在主页面内替换相应的内容，而保持菜单栏和标题栏内容不变，可以通过以下两种方式实现，两种方式的原理都是相同的，

方式一：在路由设置时，设置一个home路由，其compone对应的就是home组件，然后一级菜单对应的路由都作为其children[ ]进行设置，在home页面的主界面（main）添加<router-view>,则在点击主界面的菜单栏跳转指定的router时，就会只替换home中添加<router-view>的位置，此操作相当于是把其他的组件都设置成了home组件的子组件。其他的需要进行全部显示页面替换的可以写成home路由并列的路由对象，例如：login，404等。

const routes = [{path: '/',redirect:'/login',},{path: '/login',name: 'login',component: () => import('../views/Login/index.vue')},{path:'/home',name:'home',component: Home,redirect:'/welcome',// component:() => import('../views/Home/index.vue'),children:[{path:'/welcome',component:()=>import('../views/Home/Welcome/index.vue'),},{path:'/users',component:()=>import('../views/UserManage/UserManage.vue'),},]},

方式二：其实原理是相同的，就是写法的不同而已。每个一级菜单对应一个路由对象，同时每个一级菜单对应路由的组件（component）都设置为home(Layout)组件，然后，其默认跳转到一个二级菜单路由，其所有的二级菜单都作为其children[ ],如果有三级菜单的话继续利用children[]进行。方法二的结构看起来更清晰，但是多写了些重复的代码。

import Layout from '../views/layout/Layout'export const constantRouterMap = [{ path: '/login', component: () => import('@/views/login/index'), hidden: true },{ path: '/404', component: () => import('@/views/404'), hidden: true },{path: '/',component: Layout,redirect: '/dashboard',name: 'Dashboard',hidden: true,children: [{path: 'dashboard',component: () => import('@/views/dashboard/index')}]},{path: '/example',component: Layout,redirect: '/example/table',name: 'Example',meta: { title: 'Example', icon: 'example' },children: [{path: 'table',name: 'Table',component: () => import('@/views/table/index'),meta: { title: 'Table', icon: 'table' }},{path: 'tree',name: 'Tree',component: () => import('@/views/tree/index'),meta: { title: 'Tree', icon: 'tree' }}]},

Vue 菜单路由（router）只替换对应主页面中内容，而不是整个home页面的router index.js的两种设置方法相关推荐

vue 使用axios 出现跨域请求的两种解决方法
vue 使用axios 出现跨域请求的两种解决方法参考文章: (1)vue 使用axios 出现跨域请求的两种解决方法 (2)https://www.cnblogs.com/wangshengli5 ...
电脑桌面只有计算机回收站显示,电脑桌面上只有回收站怎么办电脑只显示回收站的两种解决方法...
不久前小编的电脑开机后,桌面只显示一个回收站,并且出现了"C:\WINDOWS\system32\config\systemprofile\Desktop不可用"的错误提示,后来经 ...
Java实现批量替换文本文档中内容
Java实现批量替换文本文档中内容有更好的方案大佬们也可以在评论区指出 import java.io.*; import java.util.HashMap; import java.util.Ma ...
桌面计算机回收站打不开,电脑桌面上只有回收站怎么办电脑只显示回收站的两种解决方法...
不久前小编的电脑开机后,桌面只显示一个回收站,并且出现了"C:\WINDOWS\system32\config\systemprofile\Desktop不可用"的错误提示,后来经 ...
windows 10 关键错误，“开始”菜单无法使用，Cortana无法使用无法工作的两种解决方法，实测可行
windows 10 关键错误,"开始"菜单无法使用,Cortana无法使用无法工作的两种解决方法,实测可行. 往往出现这个错误是在系统更新之后出现的. 第一种方法:新建文本文件 ...
vue路由history模式刷新页面时页面丢失时常见的两种解决方法
方法一: 1 2 3 4 5 6 7 8 location /{ root /data/nginx/html; index index.html index.htm; i ...
在vue文件引入echarts_vue文件中使用echarts.js的两种方式
最近工作中需要用到echarts,由于项目是用的vue-cli开发的.在网上搜到vue中合成了vue-echarts,但是不想使用vue中规定好的数据格式,于是就自己做了一个vue项目引用原生echa ...
java静态路由_Linux添加静态路由两种实现方法解析
添加路由的命令: 1.route add route add -net 192.56.76.0 netmask 255.255.255.0 dev eth0 #添加一条静态路由 route add d ...
Vue进阶（贰零壹）：JS合并两个数组方法详解
文章目录一.前言二.实现 2.1 concat 2.2 for循环 2.3 apply 2.4 ...拓展符三.拓展阅读一.前言项目开发过程中,将两个数组合并成为一个的情况十分常见.比如: ...

Vue 菜单路由（router）只替换对应主页面中内容，而不是整个home页面的router index.js的两种设置方法

Vue 菜单路由（router）只替换对应主页面中内容，而不是整个home页面的router index.js的两种设置方法相关推荐

最新文章

热门文章