从零开始搭建Vue3框架（二）：Vue-Router4.0使用与配置

前言

上篇文章我们创建了模板项目并成功运行，但是运行后的页面只是一个静态页面，并没有页面间跳转。

对于Vue这种单页应用来说，最要紧的就是控制整个系统的页面路由。因为我们使用Vue3的框架，所以这里使用Vue-Router4.0版本。

安装

通过npm安装：

npm install vue-router@4

安装成功以后，可以看到最新的是4.2.4版本：

在这里插入图片描述

路由配置

创建路由

首先在我们工程/src目录下创建/route和/views目录，并创建/route/index.js 和 /views/main.vue 文件，目录结构如下图；

在这里插入图片描述

在 index.js 文件配置路由：

// 1.引入创建路由需要的组件
import { createRouter, createWebHistory } from 'vue-router'

// 2.配置系统所有路由页面，浏览器通过path路径加载对应组件
const routes = [
    { path: '/main', component: () => import('@/views/main.vue') }
]

// 3.创建路由实例
const router = createRouter({
    history: createWebHistory(), //使用history模式，hash模式使用 createWebHashHistory() 方法
    routes
})

// 4.声明,为路由提供外部引用的入口
export default router

这里注意新版本 vue-router 的方法必须单独引入，与老版本写法有些区别。这里用到了 createWebHistory 创建history模式路由，如果需要hash模式的话可以调用 createWebHashHistory 方法。

引入路由

路由的引入我们采用全局的方式，在main.js文件中引入：

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

import router from '@/route/index' // 1.引入router

const app = createApp(App)

app.use(router)    // 2.引用router

app.mount('#app')

同时在app.vue和main.vue 分别修改组件代码：

app.vue

<script setup>

</script>

<template>
   <router-view></router-view>
</template>

<style scoped>

</style>

其中”router-view“ 将显示与 url 对应的组件。可以放在任何地方，以适应布局。

main.vue

<script setup>
</script>

<template>
    <div>这是 main</div>
</template>

<style scoped>
</style>

然后运行项目（npm run dev），打开指定的路由地址，得到我们想要的页面内容。

在这里插入图片描述

嵌套路由

上面的代码实现了路由页面的控制，但是现在的网站更多的是这个样子的：
在这里插入图片描述

要求在空白区域进行导航切换的，简单的路由配置是无法实现的。

这种情况就需要借助嵌套路由来实现了。

首先创建/views/user/userpage1.vue 和 /views/user/userpage2.vue

在这里插入图片描述在这里插入图片描述

然后修改main.vue的内容，左边是菜单，右边是显示的内容：

<script setup>
</script>

<template>
    <div class="container">
        <!-- 菜单 -->
        <div class="menu">
            <ul>
                <li><router-link to="/main/userpage1">userpage1</router-link></li>
                <li><router-link to="/main/userpage2">userpage2</router-link></li>
            </ul>
        </div>
        <!-- 内容 -->
        <div class="content">
            <router-view></router-view>
        </div>
    </div>
</template>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
}

.menu {
    width: 200px;
    background: aliceblue;
}

.content {
    flex: 1;
}
</style>

并修改 /route/index.js 配置，通过children属性指定路由main的子路由userpage1和userpage2：

// 1.引入创建路由需要的组件
import { createRouter, createWebHistory } from 'vue-router'

// 2.配置系统所有路由页面
const routes = [
    {
        path: '/main',
        component: () => import('@/views/main.vue'),
        children: [
            {
                path:'/main/userpage1',
                component: () => import('@/views/user/userpage1.vue'),
            },
            {
                path:'/main/userpage2',
                component: () => import('@/views/user/userpage2.vue'),
            }
        ]
    }
]

// 3.创建路由实例
const router = createRouter({
    history: createWebHistory(), //使用history模式，hash模式使用 createWebHashHistory() 方法
    routes
})

// 4.声明,为路由提供外部引用的入口
export default router

重新运行项目以后，页面显示如下：

在这里插入图片描述
这时候点击左侧导航，会发现浏览器地址发生改变了，但是页面只重绘了空白区域的内容，加载出了对应组件的内容。
在这里插入图片描述
在这里插入图片描述

这样就实现了我们上面提到的，由菜单导航控制内容区域的路由逻辑。

动态路由

上面讲到路由配置，只是在事先知道有哪些路由的情况下静态配置的。

但是，在实际项目中很多情况下会根据用户的权限，控制用户能够访问的页面。

这个时候虽然静态配置也是可以的（通过菜单有无控制），但是会一次性加载很多路由资源，这种情况下使用动态路由是最优秀的解决方案。

首先修改main.vue的内容，增加两个路由菜单userpage3和userpage4：

<script setup>
</script>

<template>
    <div class="container">
        <!-- 菜单 -->
        <div class="menu">
            <ul>
                <li><router-link to="/main/userpage1">userpage1</router-link></li>
                <li><router-link to="/main/userpage2">userpage2</router-link></li>
                <li><router-link to="/main/userpage3">userpage3</router-link></li> // 动态路由
                <li><router-link to="/main/userpage4">userpage4</router-link></li> // 动态路由
            </ul>
        </div>
        <!-- 内容 -->
        <div class="content">
            <router-view></router-view>
        </div>
    </div>
</template>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
}

.menu {
    width: 200px;
    background: aliceblue;
}

.content {
    flex: 1;
}
</style>

然后在views目录下创建userpage3.vue和userpage4.vue：

在这里插入图片描述
在这里插入图片描述

页面创建好了以后，下一步就是配置路由了。此时我们不再route/index下面配置路由了，而是在main.js中添加两个动态路由：

import { createApp } from 'vue'
import App from './App.vue'

import router from '@/route/index'

const app = createApp(App)

app.use(router)

//添加动态路由
router.addRoute(
    'main',
    {
        path: '/main/userpage3',
        component: () => import('@/views/user/userpage3.vue')
    }
)
router.addRoute(
    'main',
    {
        path: '/main/userpage4',
        component: () => import('@/views/user/userpage4.vue')
    }
)

app.mount('#app')

addRoute 是官方提供动态添加路由的方法，由于我们要在/main路径下添加子路由，所以addRoute的第一个参数**“main”**我们指定了要添加到父路由的name，所以需要修改route/index.js ：

// 1.引入创建路由需要的组件
import { createRouter, createWebHistory } from 'vue-router'

// 2.配置系统所有路由页面
const routes = [
    {
        path: '/main',
        name: 'main', // 指定父路由name，供动态路由使用
        component: () => import('@/views/main.vue'),
        children: [
            {
                path:'/main/userpage1',
                component: () => import('@/views/user/userpage1.vue'),
            },
            {
                path:'/main/userpage2',
                component: () => import('@/views/user/userpage2.vue'),
            }
        ]
    }
]

// 3.创建路由实例
const router = createRouter({
    history: createWebHistory(), //使用history模式，hash模式使用 createWebHashHistory() 方法
    routes
})

// 4.声明,为路由提供外部引用的入口
export default router

至此，运行项目我们就可以访问动态添加的路由了：

在这里插入图片描述

项目中的动态路由一般是根据权限，循环添加的，这里只是先做个演示。后面接入接口调用以后，会做个封装，标准化的完成路由添加。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/52774.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

产品经理：如何做好项目需求管理

产品经理：如何做好项目需求管理

产品经理每天都要接触各种不同的需求&#xff0c;只有对这些需求进行分析&#xff0c;才能更好地了解问题&#xff0c;从而制定相应的解决方案。那么&#xff0c;怎么做需求分析呢&#xff1f; 一、需求确定 选择需求是很重要的&#xff0c;先做出选择&#xff0c;才会有对应的…
阅读更多...
Spark性能调优指南来了！

Spark性能调优指南来了！

1、什么是Spark Spark 是一种基于内存的快速、通用、可扩展的大数据分析计算引擎。 Spark Core&#xff1a;实现了Spark的基本功能&#xff0c;包含任务调度、内存管理、错误恢复、与存储系统交互等模块。Spark Core中还包含了对弹性分布式数据集(Resilient Distributed Dat…
阅读更多...
农业中的计算机视觉 2023

农业中的计算机视觉 2023

物体检测应用于检测田间收割机和果园苹果 一、说明 欢迎来到Voxel51的计算机视觉行业聚焦博客系列的第一期。每个月&#xff0c;我们都将重点介绍不同行业&#xff08;从建筑到气候技术&#xff0c;从零售到机器人等&#xff09;如何使用计算机视觉、机器学习和人工智能来推动…
阅读更多...
爆肝整理，接口自动化测试-数据驱动框架封装（实战）

爆肝整理，接口自动化测试-数据驱动框架封装（实战）

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 接口自动化框架—…
阅读更多...
Java版本spring cloud 工程项目管理系统源码

Java版本spring cloud 工程项目管理系统源码

​ ​工程项目管理系统是指从事工程项目管理的企业&#xff08;以下简称工程项目管理企业&#xff09;受业主委托&#xff0c;按照合同约定&#xff0c;代表业主对工程项目的组织实施进行全过程或若干阶段的管理和服务。 如今建筑行业竞争激烈&#xff0c;内卷严重&#xff0c…
阅读更多...
VScode的简单使用

VScode的简单使用

一、VScode的安装 Visual Studio Code简称VS Code&#xff0c;是一款跨平台的、免费且开源的现代轻量级代码编辑器&#xff0c;支持几乎主流开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段提示、代码对比等特性&#xff0c;也拥有对git的开箱…
阅读更多...
00|Oracle学习（卸载、安装、创建删除数据库/数据库实例）

00|Oracle学习（卸载、安装、创建删除数据库/数据库实例）

Oracle 12c卸载 1 如果数据库配置了自动存储管理&#xff08;ASM&#xff09;先删除聚类同步服务CSS。DOS指令&#xff1a; localconfig delete2 进入“任务管理器”&#xff08;ctrlshiftEsc&#xff09;&#xff0c;将所有运行中的Oracle进程全关闭。 3 在开始菜单中&#…
阅读更多...
NPOI库：C#中使用的强大工具箱，从入门到精通

NPOI库：C#中使用的强大工具箱，从入门到精通

*引言&#xff1a; 在软件开发中&#xff0c;Excel文件是一种常见且重要的数据存储和处理方式。为了简化Excel文件的读写操作&#xff0c;C --------------------------目录-------------------------- 一、安装NPOI库二、引入命名空间三、Excel文件的读取1. 打开Excel文件2. 读…
阅读更多...
【数据挖掘竞赛】——科大讯飞：锂离子电池生产参数调控及生产温度预测挑战赛

【数据挖掘竞赛】——科大讯飞：锂离子电池生产参数调控及生产温度预测挑战赛

🤵‍♂️ 个人主页：@Lingxw_w的个人主页 ✍🏻作者简介：计算机科学与技术研究生在读 🐋 希望大家多多支持，我们一起进步！😄 如果文章对你有帮助的话， 欢迎评论 💬点赞👍🏻 收藏 📂加关注+ ​ 【科大讯飞】报名链接：https://challenge.xfyun.cn?invitaC…
阅读更多...
公众号套图制作教你打造独特商品宣传海报风格

公众号套图制作教你打造独特商品宣传海报风格

在公众号的运营中&#xff0c;一个精美的海报设计可以吸引更多的关注和转发&#xff0c;提升文章的曝光度和传播效果。然而&#xff0c;对于没有设计经验的人来说&#xff0c;制作一个令人惊艳的海报可能是一项挑战。但是&#xff0c;现在有了乔拓云这个强大的工具&#xff0c;…
阅读更多...
QT编写的串口助手

QT编写的串口助手

QT编写的串口助手 提前的知识 创建UI界面工程 找帮助文档 添加串口的宏
阅读更多...
[STL]详解list模拟实现

[STL]详解list模拟实现

[STL]list模拟实现 文章目录 [STL]list模拟实现1. 整体结构总览2. 成员变量解析3. 默认成员函数构造函数1迭代器区间构造函数拷贝构造函数赋值运算符重载析构函数 4. 迭代器及相关函数迭代器整体结构总览迭代器的模拟实现begin函数和end函数begin函数和end函数const版本 5. 数据…
阅读更多...
DevOps-Git

DevOps-Git

DevOps-Git 版本控制软件提供完备的版本管理功能&#xff0c;用于存储&#xff0c;追踪目录&#xff08;文件夹&#xff09;和文件的修改历史。版本控制软件的最高目标是支持公司的配置管理活动&#xff0c;最终多个版本的开发和维护活动&#xff0c;即使发布软件。 git安装 h…
阅读更多...
Eureka注册中心 与 OpenFeign调用接口

Eureka注册中心 与 OpenFeign调用接口

需求 一个应用通过接口&#xff0c;调用另一个应用的接口。使用OpenFeign来实现接口调用。 说明 通过OpenFeign&#xff08;本文接下来简称Feign&#xff09;调用远程接口&#xff0c;需要Eureka注册中心的支持。 OpenFeign调用接口的逻辑如下&#xff1a; 提供接口的应用…
阅读更多...
笔记本触摸板没反应怎么办？只需要4个方法！快速解决！

笔记本触摸板没反应怎么办？只需要4个方法！快速解决！

“大家知道为什么笔记本触摸板没反应吗&#xff1f;我的鼠标不见了现在触摸板也没反应&#xff0c;根本就用不了电脑了&#xff0c;有什么方法可以解决吗&#xff1f;” 触摸板是笔记本电脑上最重要的输入设备之一&#xff0c;它可以提供便捷的操作方式。对于很多朋友来说&…
阅读更多...
原型模式——对象的克隆

原型模式——对象的克隆

1、简介 1.1、概述 可以通过一个原型对象克隆出多个一模一样的对象&#xff0c;该模式被称为原型模式。 在使用原型模式时&#xff0c;需要首先创建一个原型对象&#xff0c;再通过复制这个原型对象来创建更多同类型的对象。 1.2、定义 原型模式&#xff08;Prototype Patt…
阅读更多...
前端试用期工作总结范文5篇

前端试用期工作总结范文5篇

前端试用期工作总结 &#xff08;篇1&#xff09; 时间飞逝&#xff0c;转眼间&#xff0c;做为一名Web前端开发的正式员工已经有两个月之久。在这个难忘而又夸姣的 日子里&#xff0c;我深入体会到了公司的积极氛围和各个部门的巨大魅力&#xff0c;目睹了公司一步步走向成熟…
阅读更多...
(202307)wonderful-sql:复杂一点的查询(task3)

(202307)wonderful-sql:复杂一点的查询(task3)

教程链接&#xff1a;Datawhale - 一个热爱学习的社区 知识学习 1 视图 视图是一张虚拟的表。《sql基础教程第2版》用一句话非常凝练的概括了视图与表的区别---“是否保存了实际的数据”。 通过定义视图可以将频繁使用的SELECT语句保存以提高效率。通过定义视图可以使用户看…
阅读更多...
Games101学习笔记 - 变换矩阵基础

Games101学习笔记 - 变换矩阵基础

二维空间下的变换 缩放矩阵 缩放变换: 假如一个点&#xff08;X,Y&#xff09;。x经过n倍缩放&#xff0c;y经过m倍缩放&#xff0c;得到的新点&#xff08;X1&#xff0c;Y1&#xff09;&#xff1b;那么新点和远点有如下关系&#xff0c;X1 n*X, Y1 m*Y写成矩阵就是如下…
阅读更多...
C++ 自定义数据类型

C++ 自定义数据类型

C自定义数据类型有&#xff1a;枚举类型、结构类型、联合类型、数组类型、类类型 1. typedef 声明 在编写程序时&#xff0c;除了可以使用内置的基本数据类型名和自定义的数据类型名以外&#xff0c;还可以为一个已有的数据类型另外命名。这样&#xff0c;就可以根据不同的应…
阅读更多...
最新文章

Copyright @ 2022~2023