Vue - Router

一、概述

路由

所谓路由,就是决定起点到终点的路径的进程。而在前端工程中,路由指的是根据不同的访问路径,展示不同组件的内容

Vue官方提供的路由功能叫 Vue-Router


二、如何使用

步骤

1、安装vue-router

npm install router@4

@4是指第四个版本

2、在src/router/index.js中创建路由器,并导出

简单说一下里面的函数什么意思。其中,引入vue-router的两个函数分别用于创建路由实例和配置路由的历史模式。

**createRouter是用于创建一个Vue-router的实例。**routes是一个数组,里面定义了应用的路由规则。每个路由规则都包含路径、对应的组件等信息。

createWebHistory就是可以让你使用浏览器的 History API 进行路由导航。因为在路由中有两种主要的模式:历史模式(History mode)和哈希模式(Hash mode)。假如我们现在要使用哈希模式,那么就要就要引入createWebHashHistory,最终要访问一个路由就会是这个样子。

http://example.com/#/user/profile

这是很不理想的,我们一般还是使用不带 # 的路由多一点,所以要引入createWebHistory,在这个模式下,路由的路径看起来更加干净,不包含哈希部分。如下

XML 复制代码
http://example.com/user/profile

URL 看起来更加美观,更符合传统网站的路径风格,对于支持 HTML5 History API 的浏览器,可以使用 JavaScript 动态改变 URL 而不刷新整个页面。

3、在Vue应用实例中使用vue-router

这里引入的时候直接引入' @/router ',而不是' @/router/index.js ',是因为默认会自动寻找名为index.js的文件,如果创建的router的js文件不叫index.js,那么就需要在这里写全写整。

4、声明router - view标签,展示组件内容

之后就不需要在这里面导入组件了,因为已经在index.js中定义过了。

以上步骤完成后,就可以使用路由器了

使用方法

首先从vue-router中引入useRouter,它是一个 Vue.js 生态系统中的路由管理库。它是用于构建单页面应用程序(SPA)的核心库之一。

调用这个方法可以创建出我们之前定义好的路由器,之后就可以调用其中的方法了,比如这里我就调用了router.push(' /路径 ')用于将用户导航到新的路由。

重定向

这个功能可以让你访问一个路径时,强制跳转至另一个路径。

设置redirect属性,访问path路径时跳转至redirect路径

这个功能一般用于展示子路由页面数据

三、子路由

子路由是指在一个父路由下定义的一组嵌套的子路由规则。在 Vue Router 中,这样的嵌套路由结构允许你在一个组件中渲染多个视图,每个视图对应一个子路由规则。简单来说,就是可以在不更改页面的情况下更改页面中显示的部分内容,如

点击了左边的选项,仅仅更改了中间展示的内容,整体主页面并没有改变。

使用方法

在index.js文件中,在需要使用到子路由的组件下为children属性赋值,其中是一个数组,在里面配置多个路由。

为菜单项赋值index属性

使用也很简便,直接在需要的地方加上index,但是其中仍需要写明子路由的路径。

这段代码里<el - icon>是 Element UI 中的图标组件,用于显示图标。其中的<UserFiled>、<User>、<EditPen>是自定义的组件,里面是图标。所以实现子路由跳转展示最重要的还是index

相关推荐
程序员大金42 分钟前
基于SpringBoot+Vue+MySQL的装修公司管理系统
vue.js·spring boot·mysql
john_hjy43 分钟前
11. 异步编程
运维·服务器·javascript
风清扬_jd1 小时前
Chromium 中JavaScript Fetch API接口c++代码实现(二)
javascript·c++·chrome
yanlele1 小时前
前瞻 - 盘点 ES2025 已经定稿的语法规范
前端·javascript·代码规范
It'sMyGo2 小时前
Javascript数组研究09_Array.prototype[Symbol.unscopables]
开发语言·javascript·原型模式
xgq2 小时前
使用File System Access API 直接读写本地文件
前端·javascript·面试
李是啥也不会2 小时前
数组的概念
javascript
道爷我悟了2 小时前
Vue入门-指令学习-v-html
vue.js·学习·html
无咎.lsy2 小时前
vue之vuex的使用及举例
前端·javascript·vue.js
fishmemory7sec2 小时前
Electron 主进程与渲染进程、预加载preload.js
前端·javascript·electron