Vue2-集成路由Vue Router介绍与使用

在这里插入图片描述

文章目录

  • 路由（Vue2）
    • 1. SPA 与前端路由
    • 2. vue-router基本使用
      • 创建路由组件
      • 声明路由链接和占位标签
      • 创建路由模块
      • 挂载路由模块
    • 3. vue-router进阶
      • 路由重定向
      • 嵌套路由
      • 动态路由
      • 编程式导航
      • 导航守卫
  • 本篇小结

更多相关内容可查看

路由（Vue2）

1. SPA 与前端路由

路由是根据不同的url地址来显示不同的页面或内容的功能，这个概念很早是由后端提出的，既浏览器向
不同的地址发送请求，后端返回相应的内容。

SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面
内完成。此时，不同组件之间的切换需要通过前端路由来实现。

前端路由通常是通过监听URL hash属性值的变化，切换页面，hash 属性是一个 可读可写的字符串 ，该字
符串是 URL 的锚部分（从 # 号开始的部分）。

前端路由的工作方式

  • 前端路由，指的是 Hash 地址与组件之间的对应关系。
  • 用户点击了页面上的路由链接
  • 导致了 URL 地址栏中的 Hash 值发生了变化
  • 前端路由监听了到 Hash 地址的变化
  • 前端路由把当前 Hash 地址对应的组件渲染到浏览器中

2. vue-router基本使用

vue-router 是vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。
vue-router 目前有 3.x 的版本和 4.x 的版本。其中：

  • vue-router 3.x 只能结合 vue2 进行使用
  • vue-router 4.x 只能结合 vue3 进行使用

官方文档：https://router.vuejs.org/zh/installation.html vue-router

vue-router的基本使用步骤：

  • 在项目中安装 vue-router

  • 定义路由组件

  • 声明路由链接和占位符

  • 创建路由模块

  • 导入并挂载路由模块

vue-router安装

npm install vue-router@

创建路由组件

在项目中定义 Discover.vue、 Friends.vue、 My.vue 三个组件，将来要使用 vue-router 来控制它们的 展示与切换：

Discover.vue：

<template><div><h1>发现音乐</h1></div>
</template>

Friends.vue：

<template><div><h1>发现音乐</h1></div>
</template>

My.vue：

<template><div><h1>发现音乐</h1></div>
</template>

声明路由链接和占位标签

可以使用 标签来声明路由链接，并使用 标签来声明路由占位符。示例 代码如下：
App.vue：

<template>
<div>
<h1>APP组件</h1>
<!-- 声明路由链接 -->
<router-link to="/discover">发现音乐</router-link>
<router-link to="/my">我的音乐</router-link>
<router-link to="/friend">关注</router-link>
<!-- 声明路由占位标签 -->
<router-view></router-view>
</div>
</template>

创建路由模块

在项目中创建 index.js 路由模块，加入以下代码：

import VueRouter from "vue-router";
import Vue from "vue";
import Discover from "@/components/Discover.vue";
import Friends from "@/components/Friends.vue";
import My from "@/components/My.vue";
//将VueRouter设置为Vue的插件
Vue.use(VueRouter);const router = new VueRouter({// 指定hash属性与组件的对应关系routes: [{ path: '/', redirect: '/discover'},{ path: "/discover", component: Discover },{ path: "/friends", component: Friends },{ path: "/my", component: My },],
});
export default router;

挂载路由模块

在main.js中导入并挂载router

import Vue from 'vue'
import App from './App.vue'
import router from './router'Vue.config.productionTip = falsenew Vue({
render: h => h(App),
router:router
}).$mount('#app')

3. vue-router进阶

路由重定向

路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。 通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：

const router = new VueRouter({
// 指定hash属性与组件的对应关系
routes: [
// 当用户访问 / 时，跳转到 /discover
{ path: '/', redirect: '/discover'},
{ path: '/discover', component: Discover }, 
{ path: '/friends', component: Friends },
{ path: '/my', component: My },
] })

嵌套路由

在 Discover.vue组件中，声明 toplist和 playlist的子路由链接以及子路由占位符。示例代码如下：

<template> <div>
<h1>发现音乐</h1>
<!-- 子路由链接 -->
<router-link to="/discover/toplist">推荐</router-link>  
<router-link to="/discover/playlist">歌单</router-link> <hr>
<router-view></router-view> </div>
</template>

在 src/router/index.js 路由模块中，导入需要的组件，并使用 children 属性声明子路由规则：

const router = new VueRouter({
// 指定hash属性与组件的对应关系routes: [{ path: '/', redirect: '/discover'}, {path: '/discover',component: Discover,// 通过children属性，嵌套声明子路由children: [{path:"toplist",component:TopList},{path:"playlist",component:PlayList}, ]},{ path: '/friends', component: Friends }, { path: '/my', component: My },
] })

动态路由

假如有如下 3 个路由链接：

<router-link	to="/product/1">商品1</router-link>
<router-link	to="/product/2">商品2</router-link>
<router-link	to="/product/3">商品3</router-link>

const router = new VueRouter({
// 指定hash属性与组件的对应关系routes: [{ path: '/product/1', component: Product }, { path: '/product/2', component: Product }, { path: '/product/3', component: Product },] })

上述方式复用性非常差。

动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。在 vue- router 中使用英文的冒号（:）来定义路由的参数项。示例代码如下：

{ path: '/product/:id',component:Product }

通过动态路由匹配的方式渲染出来的组件中，可以使用 $route.params对象访问到动态匹配的参数值， 比如在商品详情组件的内部，根据id值，请求不同的商品数据。

<template><h1>Product组件</h1><!-- 获取动态的id值 --><p>{{$route.params.id}}</p> 
</template><script>export default {//   组件的名称name: 'Product' }
</script>

为了简化路由参数的获取形式， vue-router 允许在路由规则中开启 props 传参。示例代码如下：

{ path: '/product/:id',component: Product, props: true }

<template><h1>Product组件</h1><!-- 获取动态的id值 --><p>{{id}}</p> 
</template><script>export default {//   组件的名称name: 'Product', props : [id]}
</script>

编程式导航

除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写 代码来实现。
想要导航到不同的 URL，则使用 router.push方法。这个方法会向 history 栈添加一个新的记录，所 以，当用户点击浏览器后退按钮时，则回到之前的 URL。
当你点击 <router-link>时，这个方法会在内部调用，所以说，点击 <router-link :to="...">等 同于调用 router.push(...)。

<template>
<button @click="gotoProduct(2)">跳转到商品2</button> </template><script>
export default { methods:{
gotoProduct: function(id){
this.$router.push('/movie/${id}') }
} }
</script>

导航守卫

导航守卫可以控制路由的访问权限。示意图如下：

全局导航守卫会拦截每个路由规则，从而对每个路由进行访问权限的控制。

你可以使用router.beforeEach注册一个全局前置守卫：

router.beforeEach((to, from, next) => {
if (to.path === '/main' && !isAuthenticated) {next('/login')
}
else {next()
}
})

  • to : 即将要进入的目标

  • from : 当前导航正要离开的路由

  • 在守卫方法中如果声明了 next 形参，则必须调用 next() 函数，否则不允许用户访问任何一个路
    由！

    • 直接放行：next()

    • 强制其停留在当前页面：next(false)

    • 强制其跳转到登录页面：next(’/login’)

本篇小结

路由就是页面跳转，无论是通过按钮或者点击事件、图片等等都可以对应实现，用过vue3的朋友会发现其实跟vue2道理一样，细枝末节的处理可能稍有差异，还有更为复杂的场景路由，更详细全面的内容可查看官方文档

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

安全防御----防火墙综合实验2

安全防御----防火墙综合实验2

安全防御----防火墙综合实验2 一、题目 二、实验要求&#xff1a; 1&#xff0c;DMZ区内的服务器&#xff0c;办公区仅能在办公时间内&#xff08;9&#xff1a;00 - 18&#xff1a;00&#xff09;可以访问&#xff0c;生产区的设备全天可以访问. 2&#xff0c;生产区不允许访…
阅读更多...
雷赛运动控制卡编程（1）

雷赛运动控制卡编程（1）

一、运动控制卡选择 电气常用知识-CSDN博客 如下旋转控制卡 DMC3800八轴高性能点位卡 - 东莞市雅恰达机电有限公司 轴少的时候选择脉冲系列卡 轴多的话就选总线型系列控制卡 样品 架构&#xff1a; 二、 添加文件 dll 添加接口文件 【最全&#xff0c;带注释版】雷赛运动…
阅读更多...
OpenCV中使用Canny算法在图像中查找边缘

OpenCV中使用Canny算法在图像中查找边缘

操作系统&#xff1a;ubuntu22.04OpenCV版本&#xff1a;OpenCV4.9IDE:Visual Studio Code编程语言&#xff1a;C11 算法描述 Canny算法是一种广泛应用于计算机视觉和图像处理领域中的边缘检测算法。它由John F. Canny在1986年提出&#xff0c;旨在寻找给定噪声条件下的最佳边…
阅读更多...
Python+wxauto=微信自动化？

Python+wxauto=微信自动化？

Pythonwxauto微信自动化&#xff1f; 一、wxauto库简介 1.什么是wxauto库 wxauto是一个基于UIAutomation的开源Python微信自动化库。它旨在帮助用户通过编写Python脚本&#xff0c;轻松实现对微信客户端的自动化操作&#xff0c;从而提升效率并满足个性化需求。这一工具的出现&…
阅读更多...
详细分析Sql Server中的declare基本知识

详细分析Sql Server中的declare基本知识

目录 前言1. 基本知识2. Demo3. 拓展Mysql4. 彩蛋 前言 实战探讨主要来源于触发器的Demo 1. 基本知识 DECLARE 语句用于声明变量 声明的变量可以用于存储临时数据&#xff0c;并在 SQL 查询中多次引用 声明变量&#xff1a;使用 DECLARE 语句声明一个或多个变量变量命名&a…
阅读更多...
SpringBoot整合JAX-RS接口

SpringBoot整合JAX-RS接口

目录 二、创建RESTful资源 三、注册JAX-RS资源 四、修改配置等信息 五、启动SpringBoot程序、访问服务 六、遇到的问题 七、与feign进行配合使用 1、接口定义 2、接口实现 3、注册资源 4、调用方web服务实现&#xff0c;跟注入普通服务一样 5、启动两个服务&#xff…
阅读更多...
html5——表单

html5——表单

目录 表单基本结构 表单标签 常用表单元素 文本框 密码框 邮箱 单选按钮 复选框 文件域 隐藏域 列表框 多行文本域 lable标签 表单按钮 常用表单属性 只读与禁用 placeholder required pattern autofocus autocomplete 用于指定表单是否有自动完…
阅读更多...
NoSQL之redis的配置与优化

NoSQL之redis的配置与优化

一、redis数据库的基础介绍与对比 Redis(RemoteDictionaryServer&#xff0c;远程字典型)是一个开源的、使用C语言编写的NoSQL数据库。Redis 基于内存运行并支持持久化&#xff0c;采用 key-value(键值对)的存储形式&#xff0c;是目前分布式架构中不可或缺的一环。 1.非关系…
阅读更多...
百日筑基第二十天-一头扎进消息队列3-RabbitMQ

百日筑基第二十天-一头扎进消息队列3-RabbitMQ

百日筑基第二十天-一头扎进消息队列3-RabbitMQ 如上图所示&#xff0c;RabbitMQ 由 Producer、Broker、Consumer 三个大模块组成。生产者将数据发送到 Broker&#xff0c;Broker 接收到数据后&#xff0c;将数据存储到对应的 Queue 里面&#xff0c;消费者从不同的 Queue 消费数…
阅读更多...
我的智能辅助大师-办公小浣熊

我的智能辅助大师-办公小浣熊

一、基本介绍 随着2022年ChatGPT为代表的AI工具对互联网领域进行第一次冲击后&#xff0c;作为一名对编程领域涉足不算特别深的一名程序员&#xff0c;对AI大模型的接触也真的不能算少了&#xff0c;这是时代的必然趋势。在此之前也曾接触过很多的AI工具&#xff0c;他们都能在…
阅读更多...
【Vscode】显示多个文件 打开多个文件时实现标签栏多行显示

【Vscode】显示多个文件 打开多个文件时实现标签栏多行显示

Vscode显示多个文件&VSCode打开多个文件时实现标签栏多行显示 写在最前面一、解决打开文件的时候只显示一个tab的办法解决办法如下&#xff1a; 二、文件标签栏多行显示设置步骤&#xff1a; &#x1f308;你好呀&#xff01;我是 是Yu欸 &#x1f30c; 2024每日百字篆刻时…
阅读更多...
电脑维护全攻略：让你的“战友”焕发新生

电脑维护全攻略：让你的“战友”焕发新生

目录 电脑维护全攻略&#xff1a;让你的“战友”焕发新生 引言 方向一&#xff1a;了解你的“战友” 1.1 电脑品牌与型号的选择 1.2 电脑硬件配置的重要性 1.3 电脑软件配置的重要性 方向二&#xff1a;日常维护措施 2.1 定期清理与优化 2.2 保持良好的上网习惯 2.3 …
阅读更多...
微服务-注册中心

微服务-注册中心

一. 分布式系统架构与微服务 分布式系统架构和微服务是现代软件开发中常见的两种概念&#xff0c;它们通常结合使用来构建灵活、可扩展和高效的应用程序。 分布式系统架构&#xff1a; 分布式系统架构是指将一个单一的应用程序或服务拆分成多个独立的部分&#xff0c;这些部分…
阅读更多...
邮箱表单系统源码

邮箱表单系统源码

邮箱表单简介 我们的邮箱表单系统是一个简洁高效的工具&#xff0c;旨在为用户提供一种便捷的方式来提交他们的邮箱地址。该系统可以用于订阅新闻通讯、注册活动、获取用户反馈等多种场景。 功能特点&#xff1a; 用户友好的界面&#xff1a; 表单设计简洁直观&#xff0c;用…
阅读更多...
t-SNE降维可视化并生成excel文件使用其他画图软件美化

t-SNE降维可视化并生成excel文件使用其他画图软件美化

t-sne t-SNE&#xff08;t-分布随机邻域嵌入&#xff0c;t-distributed Stochastic Neighbor Embedding&#xff09;是由 Laurens van der Maaten 和 Geoffrey Hinton 于 2008 年提出的一种非线性降维技术。它特别适合用于高维数据的可视化。t-SNE 的主要目标是将高维数据映射…
阅读更多...
修改vscode的字体为等宽字符

修改vscode的字体为等宽字符

在文件——首选项——设置 中 搜索 Editor: Font Family 将内容改为下面的 Consolas, Courier New, monospace 之后重启Vscode就行了
阅读更多...
初步探究Rust生态与图形界面编程

初步探究Rust生态与图形界面编程

引言 Rust作为一种现代的、安全的系统编程语言&#xff0c;自2010年问世以来&#xff0c;逐渐在开发社区中崭露头角。它的内存安全保证、并发处理能力、以及无需垃圾回收机制的高性能特性&#xff0c;使得它成为了开发系统工具、网络服务、以及嵌入式系统的热门选择。然而&…
阅读更多...
（五十三）第 8 章 动态存储管理（伙伴系统）

（五十三）第 8 章 动态存储管理（伙伴系统）

1. 背景说明 2. 示例代码 buddySystem.h // 伙伴系统实现头文件#ifndef BUDDY_SYSTEM_H #define BUDDY_SYSTEM_H#include "errorRecord.h"#define POWER_TIME 10 // 可利用空间总容量的 2 的幂次,子表的个数为 POWER_TIME + 1 #define MAX_USED_BLOCK_NUM 100 //…
阅读更多...
我的 Java 面试“打怪升级”之路01

我的 Java 面试“打怪升级”之路01

前言 在当今的科技行业&#xff0c;Java 作为一门广泛应用的编程语言&#xff0c;其相关的岗位竞争可谓十分激烈。作为一名求职者&#xff0c;经历 Java 面试就如同一场充满挑战的“打怪升级”游戏。在这里&#xff0c;我想和大家分享一下我在 Java 面试中的一些经历和感悟。 …
阅读更多...
SwiftUI 截图（snapshot）视频画面的极简方法

SwiftUI 截图（snapshot）视频画面的极简方法

功能需求 在 万物皆可截图：SwiftUI 中任意视图（包括List和ScrollView）截图的通用实现 这篇博文中，我们实现了在 SwiftUI 中截图几乎任何视图的功能，不幸的是它对视频截图却无能为力。不过别着急，我们还有妙招。 在上面的演示图片中，我们在 SwiftUI 中可以随心所欲的截图…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023