this.$route路由对象属性

包括的属性有:

  • $route.path 类型: string

字符串,对应当前路由的路径,总是解析为绝对路径,如 “/foo/bar”。

  • $route.params类型: Object

一个 key/value 对象,包含了动态片段和全匹配片段,如果没有路由参数,就是一个空对象。在使用带参数的路由路径时,传递的参数值。
在这里插入图片描述

  • $route.query类型: Object

一个 key/value 对象,表示 URL 查询参数。例如,对于路径 /foo?user=1,则有 $route.query.user == 1,如果没有查询参数,则是个空对象。

  • $route.fullPath类型: string

完成解析后的 URL,包含查询参数和 hash 的完整路径。

  • $route.name当前路由的名称,如果有的话。
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
`this.$route`对象是Vue Router提供的一个对象,它包含了当前由的信息,包括由参数、查询参数等。`this.$route.query`属性是`this.$route`对象中的一个属性,用于获取当前由的查询参数。在使用Vue Router时,你需要先正确引入和配置Vue Router,然后在组件中使用`<router-link>`或者`this.$router`对象进行由导航。例如,在Vue组件中定义由可以像下面这样: ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/user/:id', // 定义由参数 name: 'User', component: User }, { path: '/product', // 定义无参数由 name: 'Product', component: Product } ] const router = new VueRouter({ routes }) export default router ``` 在组件中使用`<router-link>`进行由导航,例如: ```html <router-link :to="{ name: 'User', params: { id: userId }}">User</router-link> <router-link :to="{ name: 'Product', query: { id: productId }}">Product</router-link> ``` 在组件中获取当前由的信息,例如: ```javascript export default { mounted() { console.log(this.$route.params.id) // 获取由参数 console.log(this.$route.query.id) // 获取查询参数 } } ``` 需要注意的是,在组件中获取由信息时,需要在组件中引入Vue Router并使用`this.$route`和`this.$route.query`属性。如果出现`this.$route`对象或`this.$route.query`属性未定义的情况,一般是因为Vue Router没有正确引入和配置,或者在组件中没有正确使用Vue Router的相关属性和方法。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值