vue-router路由

​🌈个人主页：前端青山
🔥系列专栏：Vue篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来vue篇专栏内容:Vue-Router路由

目录

Vue-Router路由

1、路由的概念

2、前端路由实现

3、Vue Router

3.1、介绍

3.2、路由模式切换

3.3、导航方式

3.3.1、声明式导航

3.3.2、编程式导航

3.4、路由重定向

3.5、嵌套路由

3.6、404路由

3.7、路由参数

3.8、路由元信息

Vue-Router路由

1、路由的概念

路由的本质就是一种对应关系（此处的路由含义同之前nodejs的路由），根据不同的URL请求，返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。

路由分为：后端路由和前端路由

  • 后端路由：由服务器端进行实现并实现资源映射分发（nodejs、jsp、php等）

    • 概念：根据不同的用户URL请求，返回不同的内容（地址与资源产生对应关系）

    • 本质：URL请求地址与服务器资源之间的对应关系（映射）

后端路由

  • 前端路由：根据不同的事件来显示不同的页面内容，是事件与事件处理函数之间的对应关系

    • 概念：根据不同的用户事件，显示不同的页面内容（地址与事件产生对应关系）

    • 本质：用户事件与事件处理函数之间的对应关系

前端路由

记住一句话：有请求就应该有响应，只不过区别在于，之前node是响应资源，现在在前端中通过事件来进行响应。

2、前端路由实现

核心思想：通过监听地址栏的变化事件来实现资源的动态显示

前端路由有2种模式：

  • hash模式

hash路由模式是这样的：http://xxx.abc.com/#/xx。 有带#号，后面就是hash值的变化。改变后面的hash值，它不会向服务器发出请求，因此也就不会刷新页面。并且每次hash值发生改变的时候，会触发hashchange事件。因此我们可以通过监听该事件，来知道hash值发生了哪些变化。

window.addEventListener('hashchange', ()=>{
  // 通过 location.hash 获取到最新的 hash 值
  console.log(location.hash);
});

  • history模式

形如：http://xxx.abc.com/xx/yy/zz。HTML5的History API为浏览器的全局history对象增加了该扩展方法。它是一个浏览器（bom）的一个接口，在window对象中提供了onpopstate事件来监听历史栈的改变，只要历史栈有信息发生改变的话，就会触发该事件。

history.pushState({},title,url); // 向历史记录中追加一条记录
history.replaceState({},title,url); // 替换当前页在历史记录中的信息。
window.addEventListener('popstate', function(event) {
    console.log(event)
})

注：浏览器地址没有#， 比如(http://localhost:3001/a); 它也一样不会刷新页面的。但是url地址会改变。但它在服务器没有配置的情况下，不能手动刷新，否则返回404页面

3、Vue Router

网址：Vue Router | Vue.js 的官方路由

vuerouter是vue全家桶（vue+vue router+vuex ）之一。

vue周边生态软件、工具

此处建议创建一个带Router的vue项目。

3.1、介绍

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

  • 嵌套的路由（套娃，父子路由）

  • 模块化的、基于组件的路由配置

  • 路由参数、查询、通配符

  • 带有自动激活（默认选中效果）的 CSS class 的链接

  • HTML5 历史模式或 hash 模式

MVVM框架采用的路由都会在地址改变的时候页面不刷新，这种应用我们称之为SPA（Single Page Application）

3.2、路由模式切换

vue-router中默认使用的是hash模式的路由，也就是前面介绍的地址栏中URL带有“#”的形式，如果需要切换成history模式，则可以在创建路由实例时进行指定，指定的配置项为mode，可选值：

  • hash：设置路由模式为hash路由

  • history：设置路由模式为history路由

3.3、导航方式

含义：从一个组件/地址去往另一个组件/地址的方式。

在页面中，导航实现有2种方式：

  • 声明式导航：通过点击链接实现的导航方式，例如HTML中的“<a>”标签，Vue中的“<router-link>”所实现的。（其性质与a标签的性质类似）

  • 编程式导航：通过调用JavaScript形式API实现的导航方式，例如location.href实现的跳转效果

3.3.1、声明式导航

它就是先在页面中定义好跳转的路由规则，vueRouter中通过router-link组件来完成

<!-- 纯字符串 -->
<router-link to="/home">Home</router-link>
​
<!-- 动态绑定路径 -->
<router-link :to="'/home'">Home</router-link>
​
<!-- 对象形式 -->
<router-link :to="{ path: '/home' }">Home</router-link>
​
<!-- 通过路由命名并且携带隐式参数 -->
<router-link :to="{ name: 'user', params: { userId: '123' }}">User</router-link>
​
<!-- 对象形式带查询字符串 -->
<router-link :to="{ path: '/register', query: { plan: 'private' }}">
  Register
</router-link>
​
<!-- 
    to 要跳转到的路由规则  string|object
    to="users"
    :to="{path:'path'}"
    tag="tagName"       去指定声明式导航产生的链接所使用的标签，默认是a标签
-->
3.3.2、编程式导航

简单来说，编程式导航就是通过JavaScript来实现路由跳转

this.$router.push("/login");
this.$router.push({ path:"/login" });
this.$router.push({ path:"/login",query:{username:"jack"} });
// 不要将path属性与params属性一起使用，这样会导致params路由参数获取不到
// name属性可以与params属性传参一起使用
this.$router.push({ name:'user' , params: {id:123} });
this.$router.go( n );//n为数字  负数为回退
this.$router.back(); // 返回上一页

注意点：编程式导航在跳转到与当前地址一致的URL时会报错，但这个报错不影响功能：

重复导航错误

如果患有强迫症，可以在路由入口文件index.js中添加如下代码解决该问题：

// 该段代码不需要记，理解即可
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch((err) => err);
};
3.4、路由重定向

  • 概念：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面

  • 实现： 通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向

代码示例

<script type="javascript">
var router = new VueRouter({
    // routes是路由规则数组 
    routes: [
        // 每个路由规则都是个配置对象，至少有path和component两个属性（重定向除外）
        // path表示当前路由规则匹配的hash地址 
        // component表示当前路由规则对应要展示的组件
        { path: '/', redirect: '/user' },
        { path: '/user', component: User },
        { path: '/register', component: Register }
    ]
})
</script>

component属性是可选属性，因此在写的时候需要注意，写错了也不会报错的。

3.5、嵌套路由

路由前缀： /admin/user/add /admin/user/del /admin/user/mod

相同部分可以提取出来，减少重复劳动。

上述概念在vue中被称之为叫做嵌套路由。

套娃，可以按照之前的nodejs处的路由前缀去理解。（当有些路由有公共部分的前缀时，在vue中就可以使用嵌套路由）

嵌套路由最关键在于理解子级路由的概念：

比如我们有一个/users的路由，那么/users下面还可以添加子级路由，如:/users/index、/users/add等等，这样的路由情形称之为嵌套路由。

核心思想：在父路由组件的模板内容中添加子路由链接和子路由填充位（占坑），同时在路由规则处为父路由配置children属性指定子路由规则：

routes: [
  { 
      path: "/user", 
      component: User,  //这个不能丢
      // 通过children属性为/user添加子路由规则
      children:[
          // 子路由地址前不能写“/”，如果写了则表示从根开始
          { path: "index", component: Index },
          { path: "add", component: Add },
      ]
  }
]
<!-- 需要在 User组件中定义一个router-view 用于嵌套路由的渲染显示 -->
<router-view></router-view>
3.6、404路由

作用：用于处理当路由匹配不上的时候页面的展示（不做404路由，则页面限时白板页面）

由于Vue路由是从上到下执行的，只要在路由配置规则中最后面放个*号（通配符）路由就可以了，例如：

const routes = [
    { path: "/hello", redirect: Hello },
    { path: "/about", component: About },
    { path: "/news", component: News },
    // 404路由
    { path: "*", component: NotFound },
];

正常情况下404找不到会有状态码，是404，请问，为什么我们现在看到的状态码是200？

目前是在做前端开发，不是后端开发，无法指定返回的状态码，等到vue项目上线后可以与后端服务器结合实现状态码的指定。

3.7、路由参数

本节就是为了restful服务的，看如果在vue中使用restful形式进行参数传递。

  • 如何传递

    • 在声明路由的时候，将可变部分通过“:变量名”的形式进行替代

  • 如何获取

    • 获取this.$route来获取

// 传递参数id
var router = new VueRouter({
    // routes是路由规则数组 
    routes: [
        { path: '/user/:id', component: User },
        // 此处的“:”只是在声明的时候写，在使用的时候不需要写“:”
    ]
})
<template>
    <div>
        <!-- 单文件形式的组件, 可以在视图中直接接收路由参数，但是一般不这么用 -->
        这是news组件{{$route.params.id}}
    </div>
</template>

路由规则中的“:”只是在声明的时候写，在使用的时候不需要写“:”，例如如下代码：

编程式导航

问题：如上代码，如果路由规则里声明需要传递参数，但是实际使用的时候没传递参数会怎么样？

答：如果声明需要传递参数，但是实际不传的话则会影响落地页的显示，显示成白板（但是不报错）。但是如果有404路由在规则的最后，则匹配404路由。

注意：在实际开发的时候会有可能需要传参也可能不需要传参的情况，这个时候需要用到可选路由参数点。

定义可选路由参数的方式很简单，只需要在原有的路由参数声明位置后面加上个?即可。例如：

{ path: "showdetail/:id?", component: ShowDetail },
3.8、路由元信息

有时，我们可能希望将任意信息附加到路由上，例如在后续做登录判断的时候需要标记哪些地址必须登录后才能访问。这些事情可以通过接收属性对象的meta属性来实现，定义路由的时候我们可以这样配置 meta 字段：

const routes = [
    {
        path: "/posts",
        component: PostsLayout,
        children: [
            {
                path: "new",
                component: PostsNew,
                // 只有经过身份验证的用户才能创建帖子
                meta: { requiresAuth: true },
            },
            {
                path: ":id",
                component: PostsDetail,
                // 任何人都可以阅读文章
                meta: { requiresAuth: false },
            },
        ],
    },
]
​

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

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

相关文章

Open3D FPS最远点下采样

Open3D FPS最远点下采样

目录 一、算法原理1、原理概述2、实现流程3、主要函数4、算法源码二、代码实现三、结果展示1、采样前的点云2、采样后的点云本文由CSDN点云侠原创，原文链接。如果你不是在点云侠的博客中看到该文章，
阅读更多...
通信原理板块——语音压缩编码

通信原理板块——语音压缩编码

微信公众号上线&#xff0c;搜索公众号小灰灰的FPGA,关注可获取相关源码&#xff0c;定期更新有关FPGA的项目以及开源项目源码&#xff0c;包括但不限于各类检测芯片驱动、低速接口驱动、高速接口驱动、数据信号处理、图像处理以及AXI总线等 1、语音压缩编码 语音压缩编码可以…
阅读更多...
Vue学习day01：追风记事本

Vue学习day01：追风记事本

文章目录 一、插值表达式二、Vue常用指令2.1 内容渲染指令2.2 条件渲染指令2.3 事件绑定指令2.4 属性绑定指令2.5 列表渲染指令2.6 双向绑定指令 三、案例&#xff1a;追风记事本 一、插值表达式 插值表达式是一种Vue的模板语法&#xff0c;我们可以用插值表达式渲染出Vue提供的…
阅读更多...
RocketMQ底层通信机制

RocketMQ底层通信机制

分布式系统各个角色间的通信效率很关键&#xff0c;通信效率的高低直接影响系统性能&#xff0c;基于Socket实现一个高效的TCP通信协议是很有挑战的&#xff0c;本节介绍RocketMQ是如何解决这个问题的。 1.Remoting模块 RocketMQ的通信相关代码在Remoting模块里&#xff0c;先…
阅读更多...
电脑技巧：推荐基于浏览器的远程桌面访问控制工具

电脑技巧：推荐基于浏览器的远程桌面访问控制工具

一、软件简介 Getscreen.me是一个基于浏览器的远程桌面访问控制工具&#xff0c;可以轻松地远程访问控制特定设备。并且注册登录账户实现允许设置具有永久访问权限的设备&#xff0c;可以通过一键进行快速连接访问&#xff0c;无需共享 ID、密码或任何内容。 Getscreen.me采用…
阅读更多...
7.jvm对象内存布局

7.jvm对象内存布局

目录 概述对象里的三个区对象头验证代码控制台输出分析 验证2代码控制台输出 实例数据对其填充 访问对象结束 概述 jvm对象内存布局详解。 相关文章在此总结如下&#xff1a; 文章地址jvm基本知识地址jvm类加载系统地址双亲委派模型与打破双亲委派地址运行时数据区地址运行时数…
阅读更多...
光明源@为什么需要智慧厕所，智慧厕所是干什么的？

光明源@为什么需要智慧厕所，智慧厕所是干什么的？

在当今数字化时代&#xff0c;城市的发展日新月异&#xff0c;城市居民对生活品质和城市服务的期望也与日俱增。在城市规划和基础设施建设中&#xff0c;智慧厕所作为一项创新性的举措&#xff0c;正逐渐崭露头角。本文将探讨为什么需要智慧厕所以及它们的实际功能和意义。 城市…
阅读更多...
SAP中销售业务的查询修改及冲销操作手册

SAP中销售业务的查询修改及冲销操作手册

目的 物流在销售订单发货开票出问题时进行查询分析及处理冲销的相关操作 触发条件 销售业务出现变更导致需要重新做销售或人为错误 必要条件 订单&#xff0c;交货单&#xff0c;发票己完成并过账 有用提示 在实际冲销业务过程中需要去分析&#xff0c;在了解业务的情况下去…
阅读更多...
asp.net实验管理系统VS开发sqlserver数据库web结构c#编程web网页设计

asp.net实验管理系统VS开发sqlserver数据库web结构c#编程web网页设计

一、源码特点 asp.net 实验管理系统 是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为sqlserver2008&#xff0c;使用c#语言开发。 asp.net实验管理系统1 应用技术&am…
阅读更多...
P6入门：项目初始化6-项目详情之资金Funding

P6入门：项目初始化6-项目详情之资金Funding

前言 使用项目详细信息查看和编辑有关所选项目的详细信息&#xff0c;在项目创建完成后&#xff0c;初始化项目是一项非常重要的工作&#xff0c;涉及需要设置的内容包括项目名&#xff0c;ID,责任人&#xff0c;日历&#xff0c;预算&#xff0c;资金&#xff0c;分类码等等&…
阅读更多...
百度文心一言

百度文心一言

1分钟了解一言是谁&#xff1f; 一句话介绍【文心一言】 我是百度研发的人工智能模型&#xff0c;任何人都可以通过输入【指令】和我进行互动&#xff0c;对我提出问题或要求&#xff0c;我能高效地帮助你们获取信息、知识和灵感哦 什么是指令&#xff1f;我该怎么和你互动&am…
阅读更多...
SAP-SD-外向交货单交期不符

SAP-SD-外向交货单交期不符

创建外向交货单时报错 销售订单的交期还没到&#xff0c;所以不能做外向交货单 但是货已经加工完成&#xff0c;现在想交货 查看销售订单的交货期为12月15日&#xff08;va03&#xff09; 在VL01N里修改“选择日期为12月15日”就可以了。
阅读更多...
7天入门python系列之第五天python项目练习

7天入门python系列之第五天python项目练习

第七天 Python项目实操 编者打算开一个python 初学主题的系列文章&#xff0c;用于指导想要学习python的同学。关于文章有任何疑问都可以私信作者。对于初学者想在7天内入门Python&#xff0c;这是一个紧凑的学习计划。但并不是不可完成的。 学到第7天说明你已经对python有了一…
阅读更多...
11.13堆的各种操作算法，二叉树的一些性质

11.13堆的各种操作算法，二叉树的一些性质

算法 二叉堆的上调 在树上进行的插入排序 。循环次数不会超过树的高度&#xff0c;即插入交换次数不会超过ologn&#xff0c;n是结点个数 要么到根节点&#xff0c;即i1结束&#xff0c;要么当前元素还比上面的元素小&#xff0c;直到不比上面的元素小&#xff0c;即h[i/2]&l…
阅读更多...
关于三维模型几何坐标修正的技术方法探究

关于三维模型几何坐标修正的技术方法探究

关于三维模型几何坐标修正的技术方法探究 倾斜摄影三维模型的几何坐标修正是保证模型准确性和一致性的重要步骤。下面将探讨几种常见的技术方法用于倾斜摄影三维模型几何坐标修正。 1、块内坐标转换&#xff1a;在倾斜摄影中&#xff0c;可以将整个场景划分为多个块&#xff0…
阅读更多...
k8s的service自动发现服务：实战版

k8s的service自动发现服务：实战版

Service服务发现的必要性: 对于kubernetes整个集群来说&#xff0c;Pod的地址也可变的&#xff0c;也就是说如果一个Pod因为某些原因退出了&#xff0c;而由于其设置了副本数replicas大于1&#xff0c;那么该Pod就会在集群的任意节点重新启动&#xff0c;这个重新启动的Pod的I…
阅读更多...
LLM App ≈ 数据ETL管线

LLM App ≈ 数据ETL管线

虽然现有的 LLM 应用程序工具&#xff08;例如 LangChain 和 LlamaIndex&#xff09;对于构建 LLM 应用程序非常有用&#xff0c;但在初始实验之外不建议使用它们的数据加载功能。 当我构建和测试我的LLM应用程序管道时&#xff0c;我能够感受到一些尚未开发和破解的方面的痛苦…
阅读更多...
Spring事务之AOP导致事务失效问题

Spring事务之AOP导致事务失效问题

情况说明 首先开启了AOP&#xff0c;并且同时开启了事务。下面这个TransactionAspect就是一个简单的AOP切面&#xff0c;有一个Around通知。 Aspect Component public class TransactionAspect {Pointcut("execution(* com.qhyu.cloud.datasource.service.TransactionSe…
阅读更多...
基于 Letterize.js + Anime.js 实现炫酷文本特效

基于 Letterize.js + Anime.js 实现炫酷文本特效

如上面gif动图所示&#xff0c;这是一个很炫酷的文字动画效果&#xff0c;文字的每个字符呈波浪式的扩散式展开。本次文章将解读如何实现这个炫酷的文字效果。 基于以上的截图效果可以分析出以下是本次要实现的主要几点&#xff1a; 文案呈圆环状扩散开&#xff0c;扩散的同时…
阅读更多...
YOLOv8-Seg改进：分割注意力系列篇 | 轻量级上采样CARAFE算子，助力小目标分割

YOLOv8-Seg改进：分割注意力系列篇 | 轻量级上采样CARAFE算子，助力小目标分割

🚀🚀🚀本文改进：轻量级上采样CARAFE算子，引入到YOLOv8，neck处 Upsanple替换为CARAFE 🚀🚀🚀CARAFE在小目标分割领域中应用广泛 🚀🚀🚀YOLOv8-seg创新专栏：http://t.csdnimg.cn/KLSdv 学姐带你学习YOLOv8，从入门到创新，轻轻松松搞定科研； 1）手把手教…
阅读更多...
最新文章

Copyright @ 2022~2023