this.$route 以及 路由的深入认识

最新推荐文章于 2023-03-01 17:47:17 发布
最新推荐文章于 2023-03-01 17:47:17 发布
阅读量1.9k 收藏 3
点赞数 1
分类专栏： 路由 vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fxinn/article/details/114957827
版权
vue 同时被 2 个专栏收录
30 篇文章 0 订阅
订阅专栏
路由
3 篇文章 0 订阅
订阅专栏

router 与 route 的区别，以及 push 方法的使用

router——所有路由，route——当前路由

router-link相当于是内嵌了一个 this.$router.push 方法。path遇到params，params会失效，相当于只有path

this.$route属性理解

this.$route.matched：里面保存了每一级的路径

this.$route.fullpath或者this.$route.path 保存了完整路径

路由传参

 

组件接收

 

 

fina_
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在Vue中使用this.$store或者是$route一直报错的解决
10-16
今天小编就为大家分享一篇在Vue中使用this.$store或者是$route一直报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE动态路由
juliotang的博客
02-27 1629
常规的路由前端控制，路由地址是静态的，后端通过匹配前端路由来派发权限； 而有时根据需求路由需要后端控制，前端不设置默认的静态路由，后端根据权限下发整个路由表，前端根据取到的内容生成路由。 静态路由存在于一个数组中，以下为一个典型的静态路由： routes: [ { path: '/', redirect: '/menu1' }, { ...
$router和$route
weixin_42349231的博客
07-07 1075
区分$router和$route this.$router：router 实例 constrouter=newVueRouter({}) this.$route：当前激活的路由信息对象 watch: { // 监听路由变化 $route (to, from) { if (to.matched[0].path !== from.matched[0].path) { xxxxxx } } } 路由...
vue-router 利用 $route 的 matched 属性实现面包屑效果
天空之上有座城
11-20 1万+
我们以一个固定的路由表来说明 let routes = [ { path: '/', component: () => import('../pages/layout/Layout.vue'), children: [ { name: 'pageA', path: 'a', component: PageA, children: [ { name: '..
$route.matched的作用以及面包屑导航的制作
weixin_45566730的博客
06-06 6254
Vue路由知识点
this.$router和this.$route区别 && 路由传参的2种方式 && this.$route的各种语法
monika_beiluqi的博客
04-05 8293
一 this.$router 和 this. $route 区别 vue官方文档说明: 通过注入路由器，我们可以在任何组件内通过 this.router访问路由器，也可以通过this.router 访问路由器，也可以通过 this.router访问路由器，也可以通过this.route 访问当前路由. 通过打印出: this.$router 和 this. $route : this.$router: 是VueRouter的实例. 包含了很多属性和对象（比如 history 对象），任何页面都可以调用
$route.matched
wushen的博客
04-20 1万+
<router-link class="icon-go" :to="{ name: '首页'}" v-if="$route.matched[0].path=='/category'"> </router-link> <span class="icon-go" @click="$router.go(-1)" v-e...
Vue路由对象属性 .meta $route.matched
热门推荐
The limits of your knowledge are the limits of your world
05-16 2万+
$route.fullPath 路由是：/path/:type真正路径是：/path/list path匹配路径: /path/list fullPath匹配路由:/path/:type 路由元信息 .meta const router = new VueRouter({ routes: [ { path: '/foo', ...
vue.js this.$router.push获取不到params参数问题
11-20
接收的方式：this.$route.query.id 2.params方式传递参数 this.$router.push({ name:'路径名称' query:{ idname:id } }) 接收的方式：this.$route.params.id 代码 this.$router.push({ path: '/container',...
Vue中this.$router.push参数获取方法
11-26
由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。 及通过路由配置的name属性访问 在路由配置文件中定义参数：   通过name...
解决vue.js this.$router.push无效的问题
12-09
if(this.email.length > 0 && this.password.length >0) { this.$http.post('/api/login', { user: this.email, password: this.password }) .then(res => { let userPwd = res.data if(this.password == ...
Vue中this.$router与this.$route的区别及其应用
qq_49428237的博客
03-01 2291
总结this,$router与this.$route的含义以及常见用法
this.$router的方法总结
Hassanh的博客
10-31 3190
this.$router的方法总结
Vue Router 总结
沉在水底的鱼的博客
09-29 780
一.route 对象 1).$route.path //当前网页的路由地址 index/test 2).$route.params //一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。 /index/bar:1 打印参数 { "id": ":1" } 3).$route.query //index?user=3 打印...
Elementui实现面包屑（$route.matched）
Mr-yang的随笔
07-25 571
matched 顾名思义 就是 匹配，this.$route.matched匹配到的会是一个数组，包含当前页面之前所有路由信息。然后我们可以直接利用路由信息渲染我们的面包屑导航。 //demo <template> <div class="nav-wrap"> <router-link v-for="(item, index) in navList" :key="index"> {{ item.name }} {{index !== list.lengt
⾯包屑 利⽤$route.matched可得到路由匹配数组，按顺序解析可得路由层次关系。
qq_42975676的博客
06-02 535
// Breadcrumb.vue watch: { $route() { // [{name:'home',path:'/'},{name:'list',path:'/list'}] console.log(this.$route.matched); // ['home','list'] this.crumbData = this.$route.matched.map(m => m.name) } }
Vue中this.$router的使用
weixin_43931617的博客
02-14 2万+
vue中this.$router.push有两种使用方法： 传入参数且地址栏中带上参数内容 this.$router.push({path/name: ' 路由 ', query: {key: value}}) （是path还是name由你自己定，如果是name那么在定义路由的时候需要写明 类似这种： { path: '/home', name: 'Home', component...
this.$route.query和this.$route.params的正确使用
qq_43436117的博客
02-01 2万+
1.this.$route.query的使用 (1)、传参数： this.$router.push({ path: '/checkout', query:{ productId:id, } }） (2)、获取参数： this.$route.query.productId (3)、在url中形式（url中带参数） http://xxx/#/goodsDetails?productId=150642571432849 (
vue 动态显示三级路由
Start2019
09-09 1万+
无需vuex、本地存储写路由面包屑。 已确定路由中包含3级菜单，如果有3级菜单，在点击二级菜单的时候，在面包屑中将该二级菜单下所有的3级菜单都显示出来；如果是一级菜单没有子菜单，或者只有二级菜单，那么面包屑中就显示一级菜单名称或二级菜单名称。
this.$route.fullpath
最新发布
06-28
### 回答1： this.$route.fullpath是Vue Router中的一个属性，表示当前路由的完整路径，包括查询参数和哈希值。例如，如果当前路由为"/home?name=John#top"，那么this.$route.fullpath的值就是"/home?name=John#top"。 ### 回答2： this.$route.fullpath是Vue Router中的一个属性，用于获取当前路由的完整路径。在Vue.js中，路由用于控制组件之间的导航。当用户在应用程序中进行页面导航时，Vue Router会根据不同的URL路径调用不同的组件来渲染页面。 在Vue.js中，this.$route表示当前路由对象，而fullpath就是当前路由的完整路径。这个完整路径包括了当前页面所在的域名、路径、查询参数以及hash部分。所以，this.$route.fullpath的值会随着每次导航而发生变化。 举个例子，如果用户在浏览器地址栏中输入http://localhost:8080/home，那么对应的fullpath就是"/home"。如果用户在地址栏中输入http://localhost:8080/home?id=1，那么fullpath就是"/home?id=1"。 在Vue中，我们可以通过this.$route.fullpath来获取当前页面的完整路径，从而进行一些操作，例如判断当前路由是否是某个路径、跳转到其他路由等操作。此外，我们还可以使用this.$route.path获取当前路由的路径，this.$route.params获取当前路由的参数等。 总之，this.$route.fullpath是Vue Router中非常重要的一个属性，可以帮助我们实现复杂的路由导航和页面渲染操作。了解它的作用和用法会对Vue.js的前端开发非常有帮助。 ### 回答3： this.$route.fullpath是Vue Router中一个重要的属性，用于获取当前路由的完整路径。实际上，this.$route是一个包含当前路由信息的对象，在Vue组件中可以通过this.$route来获取当前路由。 在Vue中，路由是非常重要的组成部分，可以通过路由实现单页应用（SPA）的效果。而this.$route.fullpath是其中一个非常重要的属性，它可以用来获得当前路由的完整路径。完整路径包含了路由的所有参数，包括查询参数和哈希值。 例如，如果我们的路由是这样定义的： ``` const routes = [ { path: '/home', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About }, { path: '/user/:id', name: 'User', component: User } ] ``` 那么，当我们访问路径为"/user/123"的路由时，this.$route.fullpath就会返回"/user/123"。如果我们使用了查询参数，例如"/user/123?lang=cn"，那么this.$route.fullpath就会返回"/user/123?lang=cn"。如果我们使用了哈希值，例如"/user/123#anchor"，那么this.$route.fullpath就会返回"/user/123#anchor"。 总之，无论当前路由包含了什么参数，this.$route.fullpath都可以准确地获取到完整的路径。我们可以在Vue组件中使用它来进行一些逻辑处理，例如判断当前路由是否匹配某个路径，或者根据当前路由的路径来动态地渲染组件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值