vue中如何获取当前路由name

目录
  • vue获取当前路由name
    • 问题背景
  • vue路由中name的作用

vue获取当前路由name

this.$route.name

问题背景

在当前项目中，1处按钮是公用按钮，需求是在指定的页面点击“返回首页”时，获取该指定页面的name值

methods:{

back(){
     console.log(this.$route.name)
     this.$router.push({name:'memberCenterIndex'});
 }
}

打印一下可以看到当前点击的页面name 值

想要path的话 this.$route.path 记过打印一下：/couponsActive。

vue路由中name的作用

可以使用nam进行路由跳转

如果不加name keep-alive 可能会产生一些未知的错误

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue3获取当前路由地址

    vue3获取当前路由地址

    正解 使用useRouter: // router的 path: "/user/:uid" <template> <div>user</div> <p>uid: {{ uid }}</p> </template> <script lang="ts"> import { defineComponent } from "vue"; import { useRouter

  • vue路由警告:Duplicate named routes definition问题

    vue路由警告:Duplicate named routes definition问题

    目录 警告产生的原因 错误类型 举例说明 静态路由 动态路由 今天在开发的时候,项目报了一个警告  Duplicate named routes definition ,这里记录一下解决方式和思路. 警告产生的原因 根据提示内容,我们大概猜测是和路由的name有关,上网了解了一下,验证了我们的猜测是正确的.警告是由于路由的name 重复导致的.(原理?who care (艹皿艹 )) 错误类型 虽然我们已经知道警告是由于name重复导致,其实细分一下还是有点不一样的. 一是静态路由中的name重

  • 解决vue路由name同名,路由重复的问题

    在项目中,想让路由后缀为空,或者index的时候,都跳转到路由为index的页面,于是在router中如下配置 routes: [{ path: '/', name: 'index', component: () => import('@/components/index').then(m => m.default) },{ path: '/index', name: 'index', component: () => import('@/components/index').then(

  • vue中如何获取当前路由name

    vue中如何获取当前路由name

    目录 vue获取当前路由name 问题背景 vue路由中name的作用 vue获取当前路由name this.$route.name 问题背景 在当前项目中,1处按钮是公用按钮,需求是在指定的页面点击“返回首页”时,获取该指定页面的name值 methods:{ back(){ console.log(this.$route.name) this.$router.push({name:'memberCenterIndex'}); } } 打印一下可以看到当前点击的页面name 值 想要path的

  • Vue中的组件及路由使用实例代码详解

    1.组件是什么 组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声明及使用 全局组件 <body> <div id="app"> <!-- 用全局组件的名称作为HTML的标签 --> <myzujian></myzujian> </div> </body> <script>

  • 在vue中实现某一些路由页面隐藏导航栏的功能操作

    为了将导航栏显示在每一个页面中,可以将导航栏与<router-view>放在同一级显示,如下: <header> ... </header> <router-view></router-view> 但是,在某些时候,我们需要隐藏导航栏显示,比如登录界面,为了实现导航栏的隐藏,可以使用如下代码: <header v-show="$route.name!=='login'"> ... </header> &

  • Vue中如何获取json文件中的数据

    目录 场景 实现 场景 访问百度音乐API需要传递音乐类型参数,而这些参数是存在musictype.json中, 现在在组件listcate.vue需要获取json数据. json文件内容: 文件位置: 实现 musictype.json { "currentType":[1,2,11,21,22,23,24,25] } listcate.vue <template lang="html"> <div> <ListCate_List v

  • 详解Vue中一种简易路由传参办法

    详解Vue中一种简易路由传参办法

    情景模拟: A页面中,有一些div是根据A中的book数据通过v-for生成的,比如item. 并且点击会根据路由跳转到B页面. 而跳转到B页面后,我需要A中的item. <div v-for="(item,index) in book" :class='{on:$route.path === `/${item.to}/`}' @click='toOther(item.to)'> </div> toOther(to,run) { if(this.$route.p

  • Vue中使用import进行路由懒加载的原理分析

    目录 使用import进行路由懒加载的原理 (1)遵循规范 (2)调用时间 (3)本质 vue路由懒加载,使用import无法处理 解决 使用import进行路由懒加载的原理 首先我们来说说,import 和 require 的区别 node 编程中最重要的思想就是模块化,import 和 require 都是被模块化所使用. (1)遵循规范 require是 AMD规范引入方式 import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法 (2)调用时间 require是运行

  • vue中如何获取本地IP地址

    vue中如何获取本地IP地址

    目录 获取本地IP地址 1.在浏览器中 2.在vue文件中,实现如下 获取本地内网IP 获取本地IP地址 IP地址需要通过js获取: 网上有很多查询接口可以获取到IP,查到的搜狐的比较多,我这里就用搜狐的: http://pv.sohu.com/cityjson?ie=utf-8 1.在浏览器中 直接输入这个地址,就可以获取到ip信息: 2.在vue文件中,实现如下 (1)在config/index.js中 proxyTable:{ } ,在里面添加代理规则 '/api': { target:

  • 在vue中获取微信支付code及code被占用问题的解决方法

    这个地方坑比较多,查看网上并没有详细的文档,新手一般写到这里很痛苦.这里我只介绍一下我解决的方案,虽然它不是最好的,但是可行的方案: 总体分两步 1)跳到微信支付链接,它会自动拼接上code 2)获取本网址,截取code: 在vue中哪里获取code? 在路由钩子函数beforeEach获取.(如果想了解beforeEach的用法,请关注我下一篇博客). 我们去请求微信网址"https://open.weixin.qq.com/connect/oauth2/authorize?appid=&qu

  • vue router学习之动态路由和嵌套路由详解

    vue router学习之动态路由和嵌套路由详解

    本文主要参考:https://router.vuejs.org/zh-cn/essentials/nested-routes.html 本文的阅读前提是已经能够搭建一个vue前台程序并且运行.如果还么有搭建可以参考文章: http://www.jb51.net/article/111650.htm 好,下面上货. 首先介绍一下动态路由. 动态路由按照我的理解,就是说能够进行页面的跳转,比如说:下面的这个页面中: <template> <div id="app">

  • vue中组件通信的八种方式（值得收藏！）

    vue中组件通信的八种方式（值得收藏！）

    前言 之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家,坐着一屋子的陌生人,相互之间怎么称呼,这时就需要先知道自己和他们之间是什么样的关系. vue组件中关系说明: 如上图所示, A与B.A与C.B与D.C与E组件之间

随机推荐