Web端实现：点击导航栏进行页面路由跳转的基本配置

不看月亮2.0

已于 2024-08-06 20:02:30 修改

阅读量625

点赞数 10

文章标签：前端 vue.js 前端框架 typescript

于 2024-08-06 20:02:11 首次发布

本文链接：https://blog.csdn.net/m0_74355933/article/details/140959387

版权

一、项目搭建

建立基本的项目文件

此项目框架为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：