(Vue3)动态(二级)路由的实现

序言

我一个写后端的朋友最近要转战做全栈,今天他问了我一个问题,“动态路由怎么实现”,一开始我还没明白他的意思,直到他给我演示了一下

以element-ui官网为例

当页面从快速上手变成国际化时,会发现红色区域不变,绿色内容区域和路由改变

他还以为是后端传过来的动态路由(并不是),其实方法很简单,就是运用到了二级路由

正文

我的这篇文章http://t.csdnimg.cn/sHlsi讲了Vue3怎么引入router,现在开始说怎么怎么使用router

首先固定页面我是在APP.vue中展示,这个时候整个页面最开始的地方就是HelloWorld页面

<template>
	<div class="bbcc">
		<div class="">
			<el-menu default-active="/keng" class="el-menu-demo" mode="horizontal" background-color="#135fad"
				text-color="#fff" router font-size="20px" :router=true>
				<el-menu-item index="/shouye">招生首页</el-menu-item>
				<el-menu-item index="/zhuanyeye">招生专业</el-menu-item>
				<el-menu-item index="/Xiaji">招生计划</el-menu-item>
				<el-menu-item index="/BenKe">报考指南</el-menu-item>
				<el-menu-item index="/ZhuanKe">录取查询</el-menu-item>
				<el-menu-item index="/dsg4">在线咨询</el-menu-item>
				<el-menu-item index="/grb">考研光荣榜</el-menu-item>
				<el-menu-item>
				  <a href="http://www.hx.cn/" target="_blank">学校官网</a>
				</el-menu-item>
			</el-menu>
		</div>
		<div>
			<router-view />
		</div>

	</div>

	<!-- <h1>{{ msg }}</h1> -->

</template>

这个时候 class=“bbcc” 里的内容是固定的,而点击 招生首页 这些事件时会进行路由跳转(注意不是页面的跳转),跳转的页面将会在router-view 里展示

我们在router.js里配置路由

// 导入所需的依赖
import { createRouter, createWebHistory } from 'vue-router';

// 导入你的组件
import Home from './components/HelloWorld.vue';
import ShouYe from './components/ceshi.vue';
import meme from './components/ceshi.vue';
import BenKe from './components/zhuanye/BenKe.vue';
import ZhuanKe from './components/zhuanye/ZhuanKe.vue';
import XiaJi from './components/jihua/XiaJi.vue';
import ZhuanYeYe from './components/zhuanye/zhuanyeye.vue';
import grb from './components/kaoyan/grb.vue';
// import ShouYe from './components/ceshi.vue';

// 创建路由实例
const router = createRouter({
history: createWebHistory(),
routes: [
  // {
  //   path: '/',
  //   name: 'Home',
  //   component: Home
  // },
  {
    path: '/',
    name: 'ShouYe',
    component: ShouYe
  },
  {
    path: '/shouye',
    name: 'meme',
    component: meme
  },
  {
    path: '/benke',
    name: 'BenKe',
    component: BenKe
  },{
    path: '/zhuanke',
    name: 'ZhuanKe',
    component: ZhuanKe
  },{
    path: '/xiaji',
    name: 'XiaJi',
    component: XiaJi
  },{
    path: '/zhuanyeye',
    name: 'ZhuanYeYe',
    component: ZhuanYeYe
  },{
    path: '/grb',
    name: 'grb',
    component: grb
  },
]
});

// 导出路由实例


export default router;

相对于vue2是不是简便了许多

结尾

希望以上内容能够帮助到大家