| Vue 菜单路由（router）只替换对应主页面中内容，而不是整个home页面的router index.js的两种设置方法 | 您所在的位置：网站首页 › 登录菜单在哪一块 › Vue 菜单路由（router）只替换对应主页面中内容，而不是整个home页面的router index.js的两种设置方法 |
Vue 菜单路由（router）只替换对应主页面中内容，而不是整个home页面的router index.js的两种设置方法
|
在系统登录到系统主页面之后，通过点击不同的菜单动态在主页面内替换相应的内容，而保持菜单栏和标题栏内容不变，可以通过以下两种方式实现，两种方式的原理都是相同的，
方式一：在路由设置时，设置一个home路由，其compone对应的就是home组件，然后一级菜单对应的路由都作为其children[ ]进行设置，在home页面的 主界面（main）添加,则在点击主界面的菜单栏跳转指定的router时，就会只替换home中添加的位置，此操作相当于是把其他的组件都设置成了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' } } ] },
|
【本文地址】
公司简介
联系我们