Vue 路由（Router）详细介绍（切换，传参，通信······

于 2024-04-29 04:22:46 发布
阅读量616 收藏 26
点赞数 20
分类专栏： 程序员 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84436095/article/details/138298385
版权
width: 80%;在App.vue中使用 （其中to为路由配置中对应的路径，active-class为链接激活时的样式）进行路由导航，使用渲染路由匹配到的组件使用进行导航，to为路由配置中的路径，active-class为链接激活时的样式HomeAbout使用渲染路径匹配到的视图组件页面展示效果点击Home，渲染Home组件点击About，渲染About组件查看页面元素，渲染路由匹配到的组件。
摘要由CSDN通过智能技术生成

width: 80%;

height: 50%;

margin: auto;

background: rgb(250, 147, 12);

}

在App.vue中使用 （其中to为路由配置中对应的路径，active-class为链接激活时的样式）进行路由导航，使用渲染路由匹配到的组件

Home

|

About

页面展示效果

点击Home，渲染Home组件

点击About，渲染About组件

查看页面元素，渲染路由匹配到的组件

之所以我可以直接进行路由跳转，是因为我进行了路由路径配置。

查看router下的index.js

参数解析：

path：路由匹配路径，即上面 中 to 匹配的就是该路径（也是直接在地址栏输入的路径），观察上面切换Home跟About时地址栏的路径变化，分别为“/home”与“/about”；</

最低0.47元/天 解锁文章
2401_84436095
关注
  • 20
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-router实现路由变更监听
weixin_45802744的博客
08-08 1959
用户点击链接元素： 户点击链接交互，即点击了<router-link> props: { tag: { type: String, default: 'a' }, // 绑定的事件 event: { type: eventTypes, default: 'click' } }, render (h: Function) { const handler = e => { .
Vue Router - 路由的使用、两种切换方式、两种传参方式、嵌套方式
最新发布
CYK_byte的博客
10-17 3250
在创建 VueRouter 中，path 还有一个 children 参数，用来定义嵌套子组件路由.通过 Vue Router 可以将现有的 Vue 开发更灵活，使得一个页面中展示多个不同的组件.a）如下四种路由传参方式（推荐最后一种）之后你就可以直接写切换路由的方法了.例如 /login/cyk/1111。a）如下三种传参方式（推荐最后一种）a）例如通过点击事件，触发路由切换。在创建路由规则对象之后加入如下配置。3.点击提交后，回归用户列表路由。b）注册组件和创建路由规则。b）解决方法二：官方配置。
vue3中vuex与router的改变
tianruine的博客
06-22 481
在store/index 在用的时候 与vue2不同的而地方是创建store的时候vue2是const store = new Vuex.Store({}），在挂载的时候vue2在main.js里面 而在vue3中通过app.use(store)进行使用在main.js router 在router/index下知识点：用createRouter来创建路由对象, createWebHistory是history模式 当用的时候在about.vue组件知识点通过useRouter, us
vue中router切换的两种方式
daniaoxp的博客
09-07 4026
摘要：router切换有两种方式，一种是标签方式切换，另一种是js方式切换 1、标签方式切换 1.1平台搭建 在原有空工程的基础上新建一个子模块，因为空工程建立讲过多次，这里直接新建子模块。 直接下一步 名字命名随意，取名如下 直接下一步 在主函数文件夹 下新建文件夹，取名为webapp 在webapp下新建文件夹js 在文件夹js添加vue.js 和 vue-router.js（注：本文最后详解这两个文件的来源） 在webapp下新建HTML文件 可取
【vue】 vue中判断路由变化 | 监听路有变化
amoureux555的博客
02-13 484
vue中判断路由变化 | 监听路有变化
vue change事件_关于Vue-Router知识整理
weixin_39540271的博客
11-25 581
首先要熟练怎么用vue-router,在用npm装完后。在入口js文件内参考以下代码。记得在vue实例中注册以下router.//使用vue-router import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) //创建router实例 let router = new Router({ routes }...
vue-router 路由传参用法实例分析
10-15
最后，`const router = new VueRouter({ routes: [...] })` 创建了一个新的 Vue Router 实例，并定义了路由配置。注意，`path: '/'` 配置会将根路径重定向到 `/home`，而嵌套路由如 `/home/lists` 和 `/home/detail`...
浅谈vue-router 路由传参的方法
08-28
本文将详细介绍 vue-router 路由传参的方法，包括路由传参的概念、路由传参的方法、路由传参的应用场景等。 路由传参的概念 ---------------- 在 Web 应用程序中，路由传参是指在路由之间传递参数的过程。例如，在...
vue路由传参 vue路由传参
11-18
Vue.js 是一款流行的前端框架，它的路由管理器 Vue Router 是实现单页面应用（SPA）功能的重要组成部分。在构建SPA的过程中，我们经常需要在不同的路由之间传递参数，以便于组件之间共享数据。Vue Router 提供了两种...
vue动态路由配置及路由传参的方式
12-10
　这就要用到动态路由跟路由传参了！ 首先我们来了解下router-link这个组件： 　简单来说，它是个导航器，利用to属性导航到目标组件，并且在渲染的时候会自动生成一个a标签，当然官方也有说明，加个tag标签属性就...
Vue 路由（Router）详细介绍（切换，传参，通信）
高大志leo的博客
12-09 1万+
在一个vue项目中，免不了对组件（页面）进行切换与跳转。而用 Vue.js + Vue Router 创建单页应用，感觉很自然：使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。 话不多说，直接开始！！！ 准备工作 在使用脚手架vue-cli3创建（vue create projectName）一个vue项目时，
Vue学习笔记（八）——router绑定事件不生效的解决方案
讨厌走开啦
04-02 2870
参考文档一：https://cn.vuejs.org/v2/guide/ 参考文档二：https://www.cnblogs.com/minghui007/p/7263177.html 对初学者来说，使用路由后遇到的第一个问题通常是尝试在路由跳转时执行定义的函数，但是发现路由跳转时函数没有执行，类似下面这样的代码： <!DOCTYPE html> <html lang="en"&...
Web开发中 前端路由 实现的几种方式和适用场景
热门推荐
小北哥哥和北妈
07-04 5万+
浅析Web开发中前端路由实现的几种方式主题 Web开发故事从名叫Oliver的绿箭虾`说起，这位大虾酷爱社交网站，一天他打开了 Twitter ，从发过的tweets的选项卡一路切到followers选项卡，Oliver发现页面的内容变化了，URL也变化了，但为什么页面没有闪烁刷新呢？于是Oliver打开的网络监控器（没错，Oliver是个程序员），他惊讶地发现在切换选项卡时，只有几个XHR请求发
vue中路由router切换
spring_world_all的博客
01-18 2449
一.实现一个简单的路由切换 前端路由使用hash值来切换，适用于单页面应用 vue中router的简单使用 1.下载vue-router.js 并安装 yard add vue-router 2.注册一个路由实例 const router = new VueRouter({ routes:[ 匹配路由规则 ] }) 把这个注册的路由添加到vue实例中 let vm = ne...
Vue-router 切换组件页面时进入进出动画
霸霸霸霸天虎丶的博客
10-24 1万+
App.vue<template> <div id="app"> <Header></Header> // 用transition 把切换组件页面的容器包含 <transition name="slide-fade"> <router-view></router-view> </transition> </div> </template><sc
vue-router点击切换路由报错
weixin_34289744的博客
05-05 694
报错: 报错原因： 设置mode:history 解决方法： 将router的mode设置为‘hash'就不报错了 原因下次再分析
基础路由的设置——使用vue-router实现导航切换
SilenceJude的博客
08-30 1万+
1.vue-router的安装。 命令行中进入项目所在文件位置【重要】，输入： npm install vue-router 安装完成后在项目文件中的package.json中可以看到vue-router的版本信息。 2.在 App.vue中 定义&lt;router-link&gt; 和 &lt;router-view&gt; 　　　　在vue-router中, 我们看到...
vue-router 切换页面之2
xiawenyi1234的博客
08-07 246
切换页面两点实现 1.如何判断切换路由时是前进还是后退 2.每次切换时向左向右切换动画如何实现 我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画. router/index.js import VueRouter from 'vue-router' import Home from '../components...
vue2 vue-router 路由传参
07-28
在 Vue 2 中，你可以使用 Vue Router 来进行路由传参。有几种方式可以实现路由传参： 1. 使用动态路由参数：在定义路由时，可以通过在路由路径中定义参数来传递数据。例如，定义一个带有参数的路由： ```javascript { path: '/user/:id', component: User } ``` 然后，在组件中可以通过 `$route.params` 来获取传递的参数： ```javascript this.$route.params.id ``` 2. 使用查询参数：在路由中使用查询参数可以在路径后面添加参数。例如，定义一个带有查询参数的路由： ```javascript { path: '/user', component: User } ``` 然后，在跳转时可以通过 `router.push` 方法传递参数： ```javascript router.push({ path: '/user', query: { id: '123' }}) ``` 在组件中可以通过 `$route.query` 来获取传递的参数： ```javascript this.$route.query.id ``` 3. 使用命名路由传参：定义命名路由时可以指定参数，然后在跳转时传递参数。例如，定义一个带有命名路由参数的路由： ```javascript { path: '/user', name: 'user', component: User } ``` 然后，在跳转时可以通过 `router.push` 方法传递参数： ```javascript router.push({ name: 'user', params: { id: '123' }}) ``` 在组件中可以通过 `$route.params` 来获取传递的参数： ```javascript this.$route.params.id ``` 这些是在 Vue 2 中传递路由参数的常用方法。根据你的需求，选择适合的方式来传递参数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值