vue2.0中route和router的理解与区别

已于 2024-01-02 16:29:40 修改
阅读量393 收藏 10
点赞数 9
文章标签： vue.js 前端 javascript
于 2024-01-02 16:29:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48390580/article/details/135343603
版权
本文详细介绍了在Vue项目中使用router进行页面跳转的方法，包括基本的`this.$router.push(路径名称)`，以及如何通过`name`别名和`query`传递参数。同时，讲解了如何在目标页面接收和处理URL中的参数。
摘要由CSDN通过智能技术生成

router

我们现在假设一个小场景：我们在项目中a页面跳转到b页面这时候如何要如何进行操作？

这个时候我们就用到了router这个东西。

this.$router.push('路径的名称')默认是path

也可以在跳转的时候传递参数 下图是用别名name进行跳转

  this.$router.push({
        name: 'xxx',
        query: {
          id: row.id
        }
      })

 当我们跳过去后，xxx页面url中会以?id=id(上图中row.id的值)

这个时候我们想用这个值会咋办？此时就涉及到route的用法

 route

我们可以通过以下方式获取到：

this.$route.query.id

最后进行一个小总结

 我们得分析一下场景

01：单纯跳页面：router的使用 router.push

02：接受url（路由地址）的参数：route的使用

小张在线学前端
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
「VUE架构」vue2.0 router 传递参数
AIGC大前端小王子
03-24 1220
本文主要介绍VUE2.0参数的传递与接收 一、传参 this.$route.push({path:'/xxx',query:{id:1}});//类似get传参，通过URL传递参数 this.$route.push({path:'/xxx',params:{id:1}});//类似post传参 二、接收 mounted(){ this.$route.......
Vue篇(008)-vue2.0中的$router 和 $route的区别
手掌日月摘星辰
03-04 397
参考答案：$route 是路由信息对象，包括path，params，hash，query，fullPath，matched，name 等路由信息参数；而 $router 是路由实例对象，包括了路由的跳转方法，钩子函数等。 解析
vue2.0中的$router 和 $route的区别
艺艺艺艺儿ya的博客
09-12 131
最近在学习vue的单页面应用开发，需要vue全家桶，其中用到了VueRouter，在路由的设置和跳转中遇到了两个对象$router 和 $route ，有些傻傻分不清，后来自己结合网上的博客和自己本地的Vue devtools结构了解了他们的区别 1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。 举例：history对象 $router
vue学习（八）vue2.0路由vue-router的简单入门使用
我是混IT圈的
03-11 3110
vue-router官网中文文档：Vue Router Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转； 首先我们来学习三个单词（route，routes，router）： 　　route：首先它是个单数，译为路由，即我们可以理解为单个路由或者某一个路由； 　　routes：它是个复数，表示多个的集合才能为复数；即我们可以理解为多个..
vue2.0-路由（router）的使用
weixin_57300214的博客
10-23 357
1、打开vscode的终端输入npm i vue-router。 2、在src文件夹下，新建一个router文件夹，并在router文件夹下，新建一个index.js文件。该文件夹下的代码如下（其中引入的组件是自己写的vue组件，建议在src文件下新建一个pages文件，把与路由相关的组件放在里面；直接用components文件夹下的组件也一样）： // 改文件专用于创建整个应用的路由器 import VueRouter from 'vue-router' // 引入组件 import About..
vue2.0-路由
qq_52822043的博客
04-14 3707
1. 前端路由的概念与原理 1）SPA与前端路由 路由（router）就是对应关系。 SPA指的是一个web网站只有唯一的一个HTML页面，所有组件的展示与切换都在这唯一的一个页面内完成，此时，不同组件之间的切换需要通过前端路由来实现。 在SPA项目中，不同功能之间的切换，要依赖于前端路由来完成。 前端路由：Hash地址与组件之间的对应关系。 2）前端路由的工作方式 用户点击了页面上的路由链接 导致了URL地址栏中的Hash值发生了变化 前端路由监听到了Hash地址的变化 前端路...
vue2.0 $router和$route的区别
sxs7970的博客
04-03 157
做项目的时候发现传参数是通过 this.$route.query或者 this.$route.params 接收 router-link 传的参数。 在网页中有两种跳转方式 方式1：使用 a 标签 跳转；(或者是 router-link ) 方式2：使用 window.location.href 的形式，叫做 编程式导航 (简单说就是写JS代码，实现跳转) vue-router 提供了一...
【vue2.0】vue-router路由传参
zhangankang的博客
01-20 845
一、vue-router动态路由传参 路由传参两种：params（/user/abc）、query（/user?id=abc） 1、 params：以路由拼接方式 第一步：在路由跳转阶段拼接路径；（router-link与普通事件两种） <router-link :to="'/user/'+userId" > 用户</router-link> && this.$router.push('/user/'+this.userId) 第二步：路由配置中接受拼接； {
vue2.0之vue-router
黄孝果的博客
04-03 3159
一、路由配置 在router文件夹下的index.js配置路由 导入Hi.vue模板 import Hi from '@/components/Hi' 配置路由 export default new Router({ routes: [ { path: '/', name: 'HelloWorld', componen...
Vue 2.0+Vue-router构建一个简单的单页应用（附源码）
12-04
目前Vue版本为：Vue2.0 官网地址：http://vuejs.org.cn/ 查看API文档：https://vuefe.cn/v2/api/ 对比其他框架：http://vuejs.org.cn/guide/comparison.html 二、环境搭建 我们使用vue-cli脚手架工具构建
vue2.0 路由不显示router-view的解决方法
11-28
- **未在模板中添加`<router-view>`**：`<router-view>`是Vue Router提供的特殊组件，用于渲染与当前激活路由匹配的组件。确保在`App`组件模板中添加了`<router-view>`。 - **ESLint问题**：`/* eslint-disable */`...
vue2.0+vue-router构建一个简单的列表页的示例代码
01-19
使用vue-cli脚手架工具构建 安装 vue-cli npm install -g vue-cli 使用vue-cli初始化项目 vue init demo1 进到目录 cd demo1 安装依赖 npm install 开始运行 npm run dev 浏览器访问http://localhost:8080 1、...
详解vue-router 2.0 常用基础知识点之router-link
08-30
在Vue Router 2.0中，`router-link`是一个非常重要的组件，用于在应用中创建导航链接。本文将深入解析`router-link`的基础知识点，帮助开发者更好地理解和使用这个组件。 1. **`router-link`的基本使用** `router-...
详解vue-router2.0动态路由获取参数
08-30
本文将详细介绍 Vue Router 2.0 中动态路由获取参数的实现方法，以帮助读者更好地理解和掌握 Vue Router 2.0 的动态路由机制。 Vue Router 2.0 动态路由机制 在 Vue Router 2.0 中，动态路由机制允许开发者根据...
详解Vue中nextTick的原理与作用
fengjing81的专栏
07-24 650
Vue中的nextTick是一个非常重要的API，它允许开发者延迟回调函数的执行直到下次DOM更新循环之后。这一机制在Vue开发中非常有用，特别是在处理DOM更新和异步操作时。下面将详细解释nextTick的原理与作用。
兼容浏览器，切换PC端显示PC端，切换H5端显示H5端
L_C_sunny的博客
07-24 289
浏览器H5端 (在浏览器H5端，切换PC端兼容显示PC端页面)PC端 （在浏览器PC端，切换H5端兼容显示H5端页面）兼容浏览器，切换PC端显示PC端，切换H5端显示H5端。中获取是否是那个端的。
vue3 reactive原理（二）-代理Set和Map及ref原理
最新发布
KEEP CODING
07-25 1182
Set和Map类型的数据也属于异质对象，它们有特定的属性和方法用来操作自身。因此创建代理时，针对特殊的方法需要特殊的对待。 Vue 的ref 是基于reactive函数实现的，它在其基础上，增加了基本类型的响应性、解决reactive在解构时丢失响应性的问题及在模版字面量中自动脱落Ref.
common-intellisense：助力TinyVue 组件书写体验更丝滑
OpenTiny的博客
07-24 1121
本文由体验技术团队Kagol原创~前两天，common-intellisense 开源项目的作者 Simon-He95 在 VueConf 2024 群里发了一个重磅消息：common-intellisense 支持 TinyVue 组件库啦！common-intellisense 插件能够提供超级强大的智能提示功能，包含属性(props)、事件(events)、插槽(slots)以及对应的注释和类型，实例上的方法(methods)等等，支持多个UI库，让你的开发效率更上一层楼。
谈谈 VueRouter 中 route 和 router 区别？
04-04
VueRouter 中的路由（route）和路由器（router）是两个不同的概念。 路由（route）是指单个路由对象，它包含了当前 URL 对应的信息，包括路径、参数、查询等，可以通过 `$route` 属性访问。在 Vue 中，路由常常用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值