点击侧边栏菜单时只切换 <router-view> 中的内容,而不是进行整个页面的路由跳转(动态路由)

解决方法:在 @select 事件中调用了 handleMenuSelect 方法来处理菜单项的选择。你可以在 handleMenuSelect 方法中根据菜单项的 index 来执行相应的操作,例如更新组件内的数据或者切换组件。由于整个页面的路由路径并没有改变,因此不会触发整个页面的路由跳转,只会更新 中的内容。这样就实现了只更新 中内容的效果。 

home组件






路由:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import home from '@/view/home'  //引入需要用的组件
import login from '@/view/login'  //引入需要用的组件
import first from '@/view/aside/first'
import person from '@/view/aside/person'
import personal from '@/view/aside/personal'
import score from '@/view/aside/score'


const routes = [
	{
		path: '/',
		redirect: '/home' // 将根路径重定向到 home 路由
	},

	{
		path: '/home',//路由地址
		name: 'home',
		component: home,//相对应的组件
		redirect:{name:"first"},
		children:[
			{
				path: '/first',
				name: 'first',
				component: first
			},
			{
				path: '/person',
				name: 'person',
				component: person
			},
			{
				path: '/personal',
				name: 'personal',
				component: personal
			},
			{
				path: '/score',
				name: 'score',
				component: score
			}
		]
	},
	{
		path: '/login',
		name: 'login',
		component: login
	}
	
]

const router = new VueRouter({
	mode: 'history',
	base: process.env.BASE_URL,
	routes
});


export default router

目录

点击侧边栏菜单时只切换 <router-view> 中的内容,而不是进行整个页面的路由跳转(动态路由)_第1张图片

你可能感兴趣的:(vue.js,elementui,javascript)