Vue2---router(配置路径、路由跳转、相关API、多级路由、路由守卫,两种工作模式)

Vue2—router(配置路径、路由跳转、相关API、多级路由、路由守卫,两种工作模式)

目录

  • Vue2---router(配置路径、路由跳转、相关API、多级路由、路由守卫,两种工作模式)
    • 安装
    • 配置路径
    • 路由跳转
      • 不携带参数跳转
      • 携带参数跳转
        • ?形式携带参数
        • 地址中直接携带参数
    • 相关API
    • 多级路由
    • 路由守卫
    • 两种工作模式
      • hash
      • history
      • 配置

安装

cnpm install -S vue-router

配置路径

创建文件:src/router/index.js

// index.js
import VueRouter from 'vue-router' // 导入router
import LoginView from '@/views/Login.vue' // 导入组件

Vue.use(VueRouter) // 使用插件

// 创建路由
const routes = [
  {
    path: '/login',	// 组件路径
    name: 'login',	// 组件名
    component: LoginView	// 组件实例
  },
]

// 创建router实例 以及设置配置
const router = new VueRouter({
  mode: 'history', // 路由模式 history不带#,hash带#
  base: process.env.BASE_URL, // 基础url为BASH_URL
  routes // 引入routes变量存放路由信息
})

main.js 中使用

// main.js
import router from './router' // 引入

new Vue({
  router, // 装载router
  store,
  render: h => h(App)
}).$mount('#app')

路由跳转

路由跳转参数根据组件配置的路由而定:

image-20240506161423915

不携带参数跳转

// js跳转
this.$router.push('/login')	// 根据路径
this.$router.push('login')	// 根据组件名
// 对象写法
this.$router.push({name:'login'})
this.$router.push({path:'/login'})

// html跳转
<router-link to="/login">
	<button>跳转到login</button>
</router-link>
<router-link to="login">
	<button>跳转到login</button>
</router-link>
// 对象写法
<router-link :to="{name:'login'}">
	<button>跳转到login</button>
</router-link>
<router-link :to="{path:'/login'}">
	<button>跳转到login</button>
</router-link>

携带参数跳转

?形式携带参数
// js跳转
this.$router.push('/login?id=3') // 根据路径
// 对象写法
this.$router.push({path:'/home',query:{'id':'3'}})


// html跳转
<router-link to="/home?id=3">
    <button>跳转到home</button>
</router-link>
// 对象写法
<router-link :to="{name:'home',query:{'id':'3'}}">
    <button>跳转到home</button>
</router-link>
地址中直接携带参数
// 在路由配置中添加:id,id可以是任何参数
const routes = [
  {
    path: '/home/:id',
    name: 'home',
    component: HomeView
  },
]
// js跳转
this.$router.push('/home/3') // 根据路径
// 对象写法
this.$router.push({name:'home',params:{'id':'3'}})


// html跳转
<router-link to="/home/3">
    <button>跳转到home</button>
</router-link>
// 对象写法
<router-link :to="{name:'home',params:{'id':'3'}}">
    <button>跳转到home</button>
</router-link>

相关API

  • this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
  • this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
  • this.$router.back(): 请求(返回)上一个记录路由
  • this.$router.go(-1): 请求(返回)上一个记录路由
  • this.$router.go(1): 请求下一个记录路由

多级路由

需求:在同一个html页面中,左边有两个跳转链接负责切换组件,右边展示不同的组件,仅以切换路由为示例

// 子组件1
<script>
export default {
  name:'sun1'
}
</script>

<template>
<div>
  我是sun1
</div>
</template>

// 子组件2
<script>
export default {
  name:'sun1'
}
</script>

<template>
<div>
  我是sun2
</div>
</template>
<script>
export default {
  name: 'Index',
}
</script>

<template>
  <div>
    // 切换组件
    <div class="left">
      <router-link to="/index/sun1">
        <p>子路由1</p>
      </router-link>
      <router-link to="/index/sun2">
        <p>子路由2</p>
      </router-link>
    </div>

	// 展示区
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>
// 注册路由
import Index from '@/components/index.vue'
import sun1 from '@/components/sun1.vue'
import sun2 from '@/components/sun2.vue'

const routes = [{
  path: '/index',
  name: 'index',
  component: Index,
  children:[
    {
      path:'sun1',
      component:sun1
    },
    {
      path:'sun2',
      component:sun2
    }
  ]
},]

image-20240506191955106

image-20240506192010054

路由守卫

路由守卫会在用户访问某个路由之前提前进行判断检查和各种操作,确保用户已符合规定的方式访问路由

  1. 全局前置守卫 beforeEach:在路由导航前执行,用于权限验证、登录状态检查等
  2. 全局解析守卫 beforeResolve:在导航被确认之前,解析组件时被调用
  3. 全局后置守卫 afterEach:在路由导航后执行,用于页面访问记录、页面埋点等
  4. 路由独享守卫:在单个路由配置中定义的守卫,仅对该路由生效
  5. 组件内守卫:在组件内部定义的守卫,用于监视组件的生命周期和路由变化

全局前置守卫示例:

// src/router/index.js
router.beforeEach((to,from,next)=>{
  console.log('我是前置路由',to,from)
  if (localStorage.getItem('name')) { //判断是否需要鉴权
    next()
  } else {
    alert('未查询到token,无权查看')
  }
})

此时访问路由不会返回任何东西,并触发函数

image-20240506192925689

当添加token后便能正常访问

image-20240506192902532

两种工作模式

hash

  • 优势
    • 兼容性好:支持所有浏览器
    • 配置简单:无需服务器额外配置,只需前端配置模式
    • 易于部署:可以直接部署在任何HTTP服务器上
  • 劣势
    • URL不美观:所有URL中都会带有#符号
    • SEO不友好:不利于网站内容被搜索引擎收录

history

  • 优势
    • URL美观:URL中不带#符号
    • 历史记录管理:可以通过浏览器的 history API 进行前进后退等操作
    • SEO友好:更符合搜索引擎优化的要求
  • 劣势
    • 服务器端配置:需要服务器进行额外配置,确保在不同路由下都返回同一个HTLM,以避免出现404错误
    • 部署复杂性:相比于hash模式,需要额外部署配置,以避免出现404错误

配置

src/router/index.js

// Vue2默认history模式
const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

浏览器输入:http://localhost:8080/#/home/其他与history基本没有区别

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

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

相关文章

存内计算加速大模型——REM-CiM的RGB-事件融合多模态类比计算内存(CiM)技术

本文为大模型&存内计算融合专题的首篇文章&#xff0c;我们将以这篇名为《REM-CiM: Attentional RGB-Event Fusion Multi-modal Analog CiM for Area/Energy-efficient Edge Object Detection during both Day and Night》为例[1]&#xff0c;探讨其在文中提到的多模态大模…

通过ip addr命令无法获取到ip地址,无法ping通百度

问题 今天通过VM安装CentOS虚拟机时&#xff0c;安装完成后&#xff0c;想查看ip地址&#xff0c;使用ip addr命令&#xff0c;发现没有展示网络ip地址&#xff0c;ping百度也不通。 解决方案 CentOS使用网络配置文件来设置网络接口的参数&#xff0c;出现这个问题说明网络的…

GEE数据集——东南亚区域油棕种种植分布(油棕榈树种植园的概率)数据集

森林数据伙伴关系围绕对全球商品驱动的森林砍伐、森林退化和恢复工作的全球监测&#xff0c;加强合作与应用。 世界各国政府和公司都承诺帮助制止砍伐森林和加快恢复&#xff0c;以避免气候变化带来的最坏影响&#xff0c;防止生物多样性丧失&#xff0c;保护森林对人类和自然…

IDM下载器激活

文章目录 1、Internet Download Manager简介2、Internet Download Managery应用3、Internet Download Managery下载 1、Internet Download Manager简介 Internet Download Manager (IDM) 是一款功能强大的下载管理软件&#xff0c;旨在帮助用户更高效地管理和加速其下载任务。它…

计算机网络 3.3OSI参考模型

第三节 OSI参考模型 一、认识OSI/RM 1.描述&#xff1a;定义了一个连接异种计算机的标准主体结构&#xff0c;给网络设计者提供了一个参考规范。 2.组织&#xff1a;国际标准化组织. 3.发展&#xff1a;1979年研究并提出了该国际标准。 4.分层原则&#xff1a; ①层次的划…

vue3 第二十八节 (vue3 事件循环之JS事件循环)

1、什么是事件循环 事件循环就是消息队列&#xff0c;是浏览器渲染主线程的工作方式&#xff1b; 过去将消息队列&#xff0c;简单的分为宏任务 和微任务 两种队列&#xff0c;而对于现在复杂多变的浏览器环境&#xff0c;显然这种处理方式已经不能满足使用&#xff0c;取而代…

基于springboot+vue的自习室管理和预约系统(全套)

一、系统架构 前端&#xff1a;vue | element-ui | html 后端&#xff1a;springboot | mybatis-plus 环境&#xff1a;jdk1.8 | mysql | maven | nodejs 二、代码及数据库 三、功能介绍 01. web端-首页1 02. web端-首页2 03. web端-注册 04. web端-登录 05. w…

【C++ 】红黑树

1.1 红黑树的概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是Red或 Black。 通过对任何一条从根到叶子的路径上各个结点着色方式的限制&#xff0c;红黑树确保没有一条路 径会比其他路径长出俩倍&#xff…

HCIP的学习(17)

BGP基础配置 使用直连接口IP地址来建立EBGP对等体关系 1、启动BGP协议 [r1]bgp 100 ----启动BGP协议&#xff0c;并且规定其AS号2、配置设备的RID数值&#xff0c;一般选择设备的loopback接口的IP地址 [r1-bgp]router-id 1.1.1.13、配置BGP对等体信息&#xff0c;包含了对等体…

庙算兵棋推演AI开发初探(4-调用AI模型)

前面讲了如何开展编写规则脚本型Agent&#xff08;智能体&#xff09;的方法&#xff0c;现在探究一下如何调用知识型&#xff08;一般而言的训练出的模型&#xff09;智能体的方法。 这次调用的是庙算平台的demo&#xff08;网址见图&#xff09; 下载了“知识强化学习型”…

ComfyUI 介绍及入门

介绍 ComfyUI 是一种用户界面&#xff0c;它采用了基于节点的流程设计&#xff0c;用于操作一种名为 Stable Diffusion 的技术。这种设计允许用户通过自定义流程来实现更精确的工作流程&#xff0c;并确保结果的可重复性。在 ComfyUI 中&#xff0c;每个模块都承担着特定的任务…

为什么质量工程师必学六西格玛?突破职业发展的瓶颈?

在质量管理领域工作多年&#xff0c;你是否曾感受到事业发展的停滞不前&#xff1f;3年、5年的职业生涯&#xff0c;薪水依旧停留在每月5000-7000&#xff0c;而同行业的其他人却能月入2-3万&#xff0c;这种差距让人不禁陷入深思。 问题究竟出在哪里&#xff1f;为什么我们的…

强化学习——马尔可夫过程的理解

目录 一、马尔可夫过程1.随机过程2.马尔可夫性质3.马尔可夫过程4.马尔可夫过程示例 参考文献 一、马尔可夫过程 1.随机过程 随机过程是概率论的“动态”版本。普通概率论研究的是固定不变的随机现象&#xff0c;而随机过程则专注于那些随时间不断变化的情况&#xff0c;比如天…

第五百零三回

文章目录 1. 概念介绍2. 使用方法2.1 普通路由2.2 命名路由 3. 示例代码4. 内容总结 我们在上一章回中介绍了"使用get显示Dialog"相关的内容&#xff0c;本章回中将介绍使用get进行路由管理.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在本章…

Github上5个实用的ChatGPT仓库

ChatGPT是一款基于聊天场景的大模型AI&#xff0c;最近火出圈。 Chat表示聊天&#xff0c;GPT表示大模型算法&#xff0c;它通过生成式的人机对话功能&#xff0c;让使用者第一次有了AI机器人‘懂我‘的感觉&#xff0c;而不是Siri、小爱那种傻瓜式的语音服务。 ChatGPT不仅仅…

M 有效算法

M 有效算法 本题考验二分知识&#xff0c;思路是二分k的取值&#xff0c;就按第一组样例来说当我们k取值为1的时候我们遍历数组想让|8-x|<k1的话x的取值范围是7-9&#xff0c;想让|3-x|<k2的话x的取值范围是1-5&#xff0c;两者x的区间不重合&#xff0c;说明肯定没有x能…

C/C++实现汉诺塔游戏和详细解

C/C实现汉诺塔游戏和详细解析 需要详细代码可联系QQ&#xff1a;3324729792 引言 汉诺塔问题是一个经典的递归问题&#xff0c;起源于一个传说中的印度寺庙。在这个问题中&#xff0c;我们需要将所有的圆盘从一个柱子移动到另一个柱子上&#xff0c;且在移动过程中&#xff…

2024审计师报名流程图解❗报名时间汇总❗

2024年审计专业技术资格考试报名正在进行中 &#x1f50d;审计报名流程 一、考生注册 打开浏览器登录中国人事考试网进行【考生注册】&#xff0c;按照提示认真填写个人注册信息&#xff0c;确保个人信息真实、完整、准确&#xff0c;并上传已处理好的照片。 二、考生报名 1⃣考…

Python中进程类Process的方法与属性的使用示例

一、示例代码&#xff1a; from multiprocessing import Process import time import osdef child_1(interval):print(子进程&#xff08;%s&#xff09;开始执行&#xff0c;父进程为&#xff08;%s&#xff09; % (os.getpid(), os.getppid()))t_start time.time()time.sle…

常用的30个linux命令总结

1、常用30个命令总结 2、具体参数用法参考网站&#xff1a; Linux命令大全(手册) – 真正好用的Linux命令在线查询网站