目录
一、项目搭建
建立基本的项目文件
此项目框架为Vite+Vue+TS,先在电脑中建立一个文件夹,cmd该文件夹,输入:
npm init vite@latest
给项目命好名,选择Vue、TypeSrcipt,便可在这个文件夹中得到一个简单的VUE项目。进入该VUE项目,启动项目:
npm install
npm run dev
建项目的详细过程可参考之前写的博客。
下载一些特定的包
该项目需要用到element-plus组件,以及需要安装路由模块,输入以下两条命令:
npm install vue-router --save
npm install element-plus --save
二、路由搭建
在新项目的src下,建立一个router文件夹存放路由ts文件,建立views文件夹存放页面vue文件。
准备工作
在main.ts中,决定了项目的入口。要引入ElementPlus、router。
则App.vue为项目的入口,main.ts:
// main.ts
import { createApp } from 'vue'
import router from "./router"
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')
App.vue:
<script setup lang="ts">
import { RouterView } from "vue-router";
</script>
<template>
<RouterView/>
</template>
具体结构
在router文件夹中,建立了一个项目的路由ts文件与一个导航栏的ts路由文件。在views文件夹下,common_layout.vue是主页面,也就是导航栏所在页面;menu1/menu2.vue两个界面模拟点击导航栏之后的页面变化。
index.ts
import { createRouter,createWebHistory } from "vue-router";
import commonlayout from "../views/common_layout.vue";
import {commonRoutes} from "./common-layout";
const router=createRouter({
history:createWebHistory(import.meta.env.BASE_URL),
routes:[
{
path:"/",
component:commonlayout,
meta:{requiresAuth:false},
children:commonRoutes,
}
]
});
export default router;
在index.ts配置中 ,path:"/"处的路由页面即为默认页面,我们设置common_layout.vue为默认页面,children:commonRoutes表示把每一个导航栏对应页面的路由引入,即引入common_layout.ts文件:
common_layout.ts
import menu1 from "../views/menu1.vue";
import menu2 from "../views/menu2.vue";
export const commonRoutes=[
{
path:"/menu1",
name:"menu1",
component:menu1,
meta:{requiresAuth:false,title:"菜单1"}
},
{
path:"/menu2",
name:"menu2",
component:menu2,
meta:{requiresAuth:false,title:"菜单2"}
}
]
common_layout.ts文件里面配置了导航栏的两个不同页面(menu1/menu2.vue两个界面)的路由参数。
三、页面编写
common_layout.vue
common_layout.vue采用容器<el-container>,<el-header>里放导航栏,<el-main>放跳转之后的页面<router-view/>组件。页面逻辑为:点击导航栏的不同菜单,导航栏以下部分页面跳转。点击事件router.push()方法实现。
去elementui官网可查看组件的使用、参数等......
<template>
<el-container class="container">
<el-header style="background-color: cadetblue;">
<div style="display: flex;align-items: center;;margin-left: 20px;">
<el-menu :default-active="$route.path" mode="horizontal" router text-color="gray" :ellipsis="false">
<el-menu-item index="/menu1" title="菜单1" @click="change1">菜单1</el-menu-item>
<el-menu-item index="/menu2" title="菜单2" @click="change2">菜单2</el-menu-item>
</el-menu>
</div>
</el-header>
<el-main style="display: flex;padding: 0;">
<router-view/>
</el-main>
</el-container>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router=useRouter();
const change1=()=>{
router.push("/menu1")
}
const change2=()=>{
router.push("/menu2")
}
</script>
<style>
.layout-container{
height: 100%;
}
</style>
menu1.vue
<template>
<p>menu1的内容嘻嘻嘻</p>
<p>menu1的内容嘻嘻嘻</p>
</template>
<script setup lang="ts">
</script>
<style>
</style>
menu2.vue
<template>
<h2>menu2的内容哈哈哈哈哈</h2>
<h2>menu2的内容哈哈哈哈哈</h2>
<h2>menu2的内容哈哈哈哈哈</h2>
<h2>menu2的内容哈哈哈哈哈</h2>
</template>
<script setup lang="ts">
</script>
<style>
</style>
四、页面效果
点击 菜单1/菜单2 ,路由变化、页面出现变化:
五、附
以上都是点击导航栏实现导航栏以下部分的跳转,因为<router-view/>写在了<el-main>中,只是页面的一部分。如果需要跳转至另一个全新的界面,路由配置可在index.ts中进行配置,比如:
import { createRouter,createWebHistory } from "vue-router";
import commonlayout from "../views/common_layout.vue";
import {commonRoutes} from "./common-layout";
import menu2 from "../views/menu2.vue";
const router=createRouter({
history:createWebHistory(import.meta.env.BASE_URL),
routes:[
{
path:"/",
component:commonlayout,
meta:{requiresAuth:false},
children:commonRoutes,
},
{
path:"/route2",
name:"route2",
component:menu2,
meta:{requiresAuth:false,title:"菜单2"},
}
]
});
export default router;
则在网址后输入route2,变可跳转至menu2.vue:
keep coding