当前位置: 首页 > news >正文

vue-router 的基本用法

vue-router 的基本用法

1.什么是 vue-router

vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用,能够轻松的管理 SPA 项目中组件的切换。

vue-router 的官方文档地址:https://router.vuejs.org/zh/

2.vue-router 安装和配置的步骤

  • 安装 vue-router 包
npm i vue-router@3.5.2 -S
  • 创建路由模块

在 src 源代码目录下,新建 router/index.js 路由模块,并初始化如下的代码:

// 1.导入 Vue 和 VueRouter 的包
import Vue from 'Vue'
import VueRouter from 'vue-router'// 2.调用 Vue.use() 函数,把 VueRouter 安装为 Vue 的插件
Vue.vue(VueRouter)// 3.创建路由模块的实例对象
const router = new VueRouter({routes:[{path:'/',redirect:'/home'},{path:'/home',component:Home,//通过 children 属性,嵌套声明子级路由规则children:[{//子级路由规则不需要斜线/path:'tab1',component:Tab1},{path:'tab2',component:Tab2}]},{path:'/movie',component:Movie}]
})// 4.向外共享路由实例对象
export default router
  • 导入并挂载路由模块

在 src/main.js 入口文件中,导入并挂载路由模块。示例代码如下:

import Vue from 'vue'
import App from './App.vue'// 1.导入路由模块
import router from '@/router'new Vue({render:h => h(App),// 2.挂载路由模块router:router
}).$mount('#app')
  • 声明路由链接和占位符

在 About.vue 组件中,声明 tab1 和 tab2 的子路由链接以及子路由占位符。示例代码如下:

<temlate><div><router-link to='/about/tab1'> tab1 </router-link><router-link to='/about/tab2'> tab2 </router-link><!-- 2.在 about 页面中,声明子路由的占位符 --><router-view></router-view></div>
</template>

3.vue-router 中的编程式导航 API

vue-router 提供了许多编程式导航的 API,其中最常用的导航 API 分别是: ① this.$router.push(‘hash 地址’)

  • 跳转到指定 hash 地址,并增加一条历史记录

② this.$router.replace(‘hash 地址’)

  • 跳转到指定的 hash 地址,并替换掉当前的历史记录

③ this.$router.go(数值 n)

  • 实现导航历史前进、后退
  • $router.back() 在历史记录中,后退到上一个页面
  • $router.forward() 在历史记录中,前进到下一个页面

4.导航守卫

  • 全局前置守卫

每次发生路由的导航跳转时,都会触发全局前置守卫。因此,在全局前置守卫中,程序员可以对每个路由进行访问权限的控制:

//在 /router/index.js 中//创建路由实例对象
const router = new VueRouter({...})//调用路由实例对象的 beforeEach 方法,即可声明“全局前置守卫”
//每次发生路由导航跳转的时候,到会自动触发 fn 这个“回调函数”
router.beforeEach(fn)
  • 守卫方法的 3 个形参
//创建路由实例对象
const router = new VueRouter({...})
//全局前置守卫
router.beforeEach((to,from,next)=>{//to 是将要访问的路由信息对象//from 是将要的路由的信息对象//next 是一个函数,调用 next() 表示放行,允许这次路由导航
})                              

参考示意图,分析 next 函数的 3 种调用方式最终导致的结果:

当前用户拥有后台主页的访问权限,直接放行:next()

当前用户没有后台主页的访问权限,强制其跳转到登录页面:next(‘/login’)

当前用户没有后台主页的访问权限,不允许跳转到后台主页:next(false)

router.beforeEach((to,from,next)=>{if(to.path === '/main'){const token = localStorage.getItem('token')if(token){next()// 持有 token 访问后台主页}else{next('/login')// 访问后台主页,但是没有token,强制跳转登录页}}else{next()// 不是访问后台主页,直接放行}
})

相关文章:

vue-router 的基本用法

vue-router 的基本用法 1.什么是 vue-router vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用&#xff0c;能够轻松的管理 SPA 项目中组件的切换。 vue-router 的官方文档地址&#xff1a;https://router.vuejs.org/zh/ 2.vue-router 安装和配置的…...

图像显著性目标检测

一、概述 1、定义 图像显著性检测(Saliency Detection,SD)&#xff0c; 指通过智能算法模拟人的视觉系统特点&#xff0c;预测人类的视觉凝视点和眼动&#xff0c;提取图像中的显著区域(即人类感兴趣的区域)&#xff0c;可以广泛用于目标识别、图像编辑以及图像检索等领域&am…...

力扣-查找重复的电子邮箱

大家好&#xff0c;我是空空star&#xff0c;本篇带大家了解一道简单的力扣sql练习题。 文章目录前言一、题目&#xff1a;182. 查找重复的电子邮箱二、解题1.正确示范①提交SQL运行结果2.正确示范②提交SQL运行结果3.正确示范③提交SQL运行结果4.正确示范④提交SQL运行结果总结…...

如何选择正规可靠的ISO认证机构?

ISO认证其实早已融入我们生活中&#xff0c;因为日常生活很多产品都有认证标识&#xff0c;企业办理ISO体系就需要找第三方认证公司&#xff0c;市面上这种公司也有不少&#xff0c;但找到合适可靠、认真负责的还是不易&#xff0c;尤其是体系认证有年审&#xff0c;如何留住客…...

React源码解读之更新的创建

React 的鲜活生命起源于 ReactDOM.render &#xff0c;这个过程会为它的一生储备好很多必需品&#xff0c;我们顺着这个线索&#xff0c;一探婴儿般 React 应用诞生之初的悦然。 更新创建的操作我们总结为以下两种场景 ReactDOM.rendersetStateforceUpdate ReactDom.render …...

【程序人生】从土木专员到网易测试工程师,薪资翻3倍,他经历了什么?

转行对于很多人来说&#xff0c;是一件艰难而又纠结的事情&#xff0c;或许缺乏勇气&#xff0c;或许缺乏魄力&#xff0c;或许内心深处不愿打破平衡。可对于我来说&#xff0c;转行是一件不可不为的事情&#xff0c;因为那意味着新的方向、新的希望。我是学工程管理的&#xf…...

C++——C++11第二篇

目录 可变参数模板 lambda表达式 lambda表达式语法 捕获列表说明 可变参数模板 可变参数&#xff1a;可以有0到n个参数&#xff0c;如之前学过的 Printf C11的新特性可变参数模板能够让您创建可以接受可变参数的函数模板和类模板 模板参数包 // Args是一个模板参数包&…...

14.最长公共前缀

编写一个函数来查找字符串数组中的最长公共前缀。如果不存在公共前缀&#xff0c;返回空字符串 ""。示例 1&#xff1a;输入&#xff1a;strs ["flower","flow","flight"]输出&#xff1a;"fl"示例 2&#xff1a;输入&…...

【免费教程】 SWMM在城市水环境治理中的应用及案例分析

SWMMSWMM&#xff08;storm water management model&#xff0c;暴雨洪水管理模型&#xff09;是一个动态的降水-径流模拟模型&#xff0c;主要用于模拟城市某一单一降水事件或长期的水量和水质模拟。EPA&#xff08;Environmental Protection Agency&#xff0c;环境保护署&am…...

SortableJS/Sortable拖拽组件,使用详细(Sortablejs安装使用)

简述 作为一名前端开发人员&#xff0c;在工作中难免会遇到拖拽功能&#xff0c;分享一个github上一个不错的拖拽js库&#xff0c;能满足我们在项目开发中的需要&#xff0c;支持Vue和React&#xff0c;下面是SortableJS的使用详细&#xff1b; 这个是sortableJS中文官方文档&…...

Heartbeat+Nginx实验

HeartbeatNginx实验 Heartbeat是什么&#xff1f; Heartbeat是 Linux-HA 工程的一个组件&#xff0c;自1999 年开始到现在&#xff0c;发布了众多版本&#xff0c;是目前开源 Linux-HA项 目成功的一个例子&#xff0c;在行业内得到了广泛的应用 构建规划&#xff1a; 两台后…...

JavaEE|网络编程之套接字 TCP

文章目录一、ServerSocket API构造方法常用方法二、Socket API构造方法常用方法注意事项三、TCP中的长短连接E1:一发一收&#xff08;短连接&#xff09;E2:请求响应&#xff08;短连接&#xff09;E3&#xff1a;多线程下的TCP回响服务器说明&#xff1a;这部分说实话有点懵&a…...

Robot Framework自动化测试---元素定位

不要误认为Robot framework 只是个web UI测试工具&#xff0c;更正确的理解Robot framework是个测试框架&#xff0c;之所以可以拿来做web UI层的自动化是国为我们加入了selenium2的API。比如笔者所处工作中&#xff0c;更多的是拿Robot framework来做数据库的接口测试&#xf…...

ASP.NET Core中的路由

传统路由 app.MapControllerRoute( name: "default", pattern: "{controllerHome}/{actionIndex}/{id?}"); MapControllerRoute用于创建单个路由。 单个路由命名为 default 路由 。大多数具有控制器和视图的应用都使用类似 default 路由的路由模板。 之所…...

VBA提高篇_26 Textbox多行_ListBox_ComboBox

文章目录1. 文本框多行换行2. ListBox: 列表框2.1 列表框中添加条目的三种方法:3. ComboBox 组合框: 属性方法等同于以上ListBox1. 文本框多行换行 MultiLine: 控制文本框多行自动换行() Enterkeybehevior: True 代表允许在文本框中使用回车键换行 WordWrap: True 代表自动换…...

python环境配置

python环境配置一、ADB环境配置1、ADB下载路径:2、点击下载3、解压并放到本地磁盘4、配置ADB环境变量二、Python环境配置1、Python下载路径:2、点击下载(默认下载最新的)3、解压并放到本地磁盘4、配置Python环境变量5、配置pip环境变量三、Pycharm安装1、pycharm下载路径:2、点…...

集算器连接外部库

1. 配置jar包将以下jar包从报表的类路径&#xff08;【安装根目录】\report\lib或【安装根目录】\report\web\webapps\demo\WEB-INF\lib&#xff09;中拷贝到集算器目录&#xff08;【安装根目录】\esProc\ extlib\mongoCli&#xff09;&#xff1b;润乾外部库核心jar为:scu-mo…...

力扣刷题|216.组合总和 III、17.电话号码的字母组合

文章目录LeetCode 216.组合总和题目链接&#x1f517;思路LeetCode 17.电话号码的字母组合题目链接&#x1f517;思路LeetCode 216.组合总和 题目链接&#x1f517; LeetCode 216.组合总和 思路 本题就是在[1,2,3,4,5,6,7,8,9]这个集合中找到和为n的k个数的组合。 相对于7…...

机器学习笔记之谱聚类(一)k-Means聚类算法介绍

机器学习笔记之谱聚类——K-Means聚类算法介绍引言回顾&#xff1a;高斯混合模型聚类任务基本介绍距离计算k-Means\text{k-Means}k-Means算法介绍k-Means\text{k-Means}k-Means算法示例k-Means\text{k-Means}k-Means算法与高斯混合模型的关系k-Means\text{k-Means}k-Means算法的…...

云原生周刊 | 2023 年热门:云 IDE、Web Assembly 和 SBOM | 2023-02-20

在 CloudNative SecurityCon 上&#xff0c;云原生计算基金会的首席技术官 Chris Aniszczyk 在 The New Stack Makers 播客的这一集中强调了 2023 年正在形成几个趋势&#xff1a; 随着 GitHub 的 Codespaces 平台通过集成到 GitHub 服务中获得认可&#xff0c;云 IDE&#xf…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

HBuilderX安装(uni-app和小程序开发)

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...