Vue——$route参数对象简介

已于 2022-05-13 11:39:49 修改
阅读量384 收藏 1
点赞数 1
分类专栏： # + VueRouter + Vue 2 文章标签： vue.js javascript 前端 hash vue-router
于 2022-05-13 11:34:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63836026/article/details/124748392
版权

相信我们对于vue-router不陌生

当我们打印当前的Vue实例的话，在Vue实例中是会有$route这样一个参数对象的

非常的重要，我们来看一下都有哪些属性：

常用的有fullPath、params、path以及query

fullPath：完整的哈希地址------我们可能会疑惑--这不是和path路径一样吗？

当我们在Hash地址之后添加上一串查询字符串参数的话，我们就不会这么认为了：

并且后面的查询参数也可以使用query来访问到

 params访问到的是路径参数

path访问Hash路径 

matched访问当前路由的所有嵌套路径片段的路由规则 

meta 路由元信息

Try Tomato
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
在Vue中使用this.$store或者是$route一直报错的解决
10-16
今天小编就为大家分享一篇在Vue中使用this.$store或者是$route一直报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router学习笔记（一）
weixin_33805992的博客
05-15 717
学习vue-router首先要认识的两个属性 $router 和 $route。 $router指的是router实例，$route则是当前激活的路由信息对象，是只读属性，不可更改，但是可以watch（监听）。 在浏览器中分别打印出$router 和 $route $router： 属性： $router.app ：配置了router的Vue根实例 $router.mode：路由...
Vue Router相关属性
weixin_55803498的博客
05-30 254
**1，**映射配置 在index.js里创建的VueRouter对象中写入相关的hash路径和相关Vue组件 const routes = [{ path: '', //重定向设置，默认显示的hash为home redirect: '/home' }, { path: '/home', component: home }, { path: '/about', co
vueRouter的$route和$router的解析和运用场景
weixin_44312227的博客
06-27 1273
vueRouter的$route和$router的解析和运用场景
vueRouter常用属性
ll_883963的博客
11-29 372
很多情况下，用户希望查看详情页以后,返回列表页刚刚浏览的位置,但由于列表页组件已经被销毁，所以我们重新返回到列表页后页面会置顶，就需要重新下拉查看列表，这样就做了很多没有必要的操作。如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 “/app/”,所有的请求都会在url之后加上/app/也可以使用如下两种方案（更推荐使用scrollBehavior方案）
vue路由对象（$route）参数简介
01-18 1048
路由对象在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route ，并且当路由切换时，路由对象会被更新。 so ,路由对象暴露了以下属性： 1.$route.path 字符串，等于当前路由对象的路径，会被解析为绝对路径，如 "/home/news" 。 2.$route.params 对象，包含路由中的动态片段和全匹配片段的键值对。 ...
vue-router中当前路由对象属性
dreamingbaobei的博客
08-26 1610
Vue项目中如果引入了Vue router实例,就可以在Vue实例中通过$route访问到当前匹配到的路由对象。 $route对象代表着当前路由对象，属性包括： path: String,当前路由对象的名称|当前路由对象的路径，会被解析为绝对路径 query Object,|路由中携带的查询参数 params Object,包含路由中的动态片段和全匹配片段的键值对。 matched: Array,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。即匹配到的所有的 RouteRecord 对象 ful
this.$route路由对象属性
Blablabla_的博客
11-02 3478
包括的属性有： $route.path 类型: string 字符串，对应当前路由的路径，总是解析为绝对路径，如 “/foo/bar”。 $route.params类型: Object 一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。在使用带参数的路由路径时，传递的参数值。 $route.query类型: Object 一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user ==
`this.$router`路由传参和`this.$route`获取参数
独滕的博客
05-06 3544
this.$router和this.$route的区别 this.$router:表示全局路由对象，里面包含属性push()，可以在任意页面实现路由跳转，任何页面都可以调用它的 push(), replace(), go() 等方法。 this.$route:表示当前路由对象，里面包含属性name path query params等，可以从对象里获取一些数据。 this.$router的push方法 //字符串 this.$router.push('home') //对象 this.$router.
vue$route路由对象
Nikki_u的博客
03-27 252
当前激活路由的状态信息，包含当前url的信息 App.vue <!-- 入口 --> <router-link to="/detail/1?age=22&name=ymm">one</router-link> <!-- 出口 --> <router-view></router-view> main.js const router=new VueRouter({ routes:[ { path: '/det
Vue路由对象属性 .meta $route.matched详解
12-13
$route.fullPath 1 路由是：/path/:type真正路径是：/path/list 2 path匹配路径: /path/list 3 fullPath匹配路由: /path/:type 路由元信息 .meta const router = new VueRouter({ routes: [ { path: '/foo', ...
vue $router和$route的区别详解
01-22
一、router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history...打印this.$route和this.$router。 路由传参的方式 1.可以手写完整的path： this.$router.push({path:`/user/$
vue router总结 $router和$route及router与 router与route区别
12-12
vue router总结 $router和$route及router与 router与route区别 ...this.$route相当于当前激活的路由对象，包含当前url解析得到的数据，可以从对象里获取一些数据，如name,path等。 2 路由跳转分为编程式和声明式
vue-router路由属性整理
HwH66998的博客
04-16 2803
redirect路由重定向 代码： const routes = [ { path:'/', redirect:'/home'//路由重定向 }, { path:'/home', component:'/home' } ] 在router实例里加上mode："history"去掉URL路径#号(hash模式)改成history模式，必须要和服务器配合起来，不然会崩 代...
vue中$router 与 $route区别
weixin_30790841的博客
11-15 148
vue-router中经常会操作的两个对象\(route和\)router两个。 1、$route对象 $route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。 **1.$route.path** 字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。 **2.$route.params** ...
vue-router之router-link
dh0536的博客
11-24 3785
<router-link>组件支持用户在具有路由功能的应用中（点击）导航。 通过to属性指定目标地址，默认渲染成带有正确链接的<a>标签，可以通过配置tag属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。 <router-link>比起写死的<a href="...">会好...
vue router知识点汇总
zoulei0718的博客
12-09 220
1.$router 和 $route的区别： - $router：就那个全局唯一的VueRouter对象，挂载在Vue对象里，包括我们定义的路由规则，有钩子函数、push，replace，go，back，forward，addRoutes等方法，所以每个组件里this.$router拿到的都是同一个实例； - $route:路由信息对象，就是我们配置路由规则数组里的对象的再次封装，常用属性：fullPath、path，hash，matched，name、query，params，后2个属性是取传递过来的参数
vue中的$route和$rounter的相关方法使用
wlijun_0808的博客
05-18 1573
$route中的方法介绍 （1）$route.path 得到的是一个字符串，等于当前路由对象的路径，会被解析成为绝对路径，如’/home/news’ （2）$route.params 得到的是一个对象，包含路由中的动态片段和全匹配片段的键值对 （3）$route.query 得到的是一个对象，包含路由中查询参数的键值对，例如，对于/home/news/detail/01?favorite = yes，如果得到$route.query.favorite == ‘yes’ （4）$route.router 路由
vue-router 源码分析——2. router-link 组件是如何实现导航的
最新发布
miyagiSimple的博客
06-04 751
vue-router中 router-link 组件是如何实现导航的。recolve返回的对象里面的内容主要为location, route , href。location是标准化后的to，并且打上了标记表示已标准化，防止多次标准化，提升效率。route是通过遍历pathList和pathMap，利用正则表达式找到的和to匹配的路由对象，里面包含很多需要的内容。href在默认的hash模式下，会在to的前面加上#号，例如这里的’#/foo’。
vue中$route和$router有什么区别
05-24
1. $route是一个存储当前路由信息的对象，包括当前URL路径、参数、查询参数等信息。而$router是一个管理所有路由的对象，包括路由的定义、切换等功能。 2. $route是只读的，不能直接修改，而$router可以通过编程式...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Try Tomato

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值