vue获取当前激活路由的方法

一个 route object（路由信息对象） 表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 route records（路由记录）。

route object 是 immutable（不可变） 的，每次成功的导航后都会产生一个新的对象。

route object 出现在多个地方:

在组件内，即 this.$route

在 $route 观察者回调内

router.match(location) 的返回值 （在main.js可以获取当前激活路由信息）

注意：

this.$route的path和router.match(location)的path是不一样的，他们都有一个属性fullpath,值是hash和path的拼接，router.match(location)在我这里一直是等于/login，应该是指向根路由，hash是带上描点#的当前路由路径，因此，要使用router.match(location)获取当前激活的路由，只能使用hash属性，原因还不知道。。

以上这篇vue获取当前激活路由的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • vue登录路由验证的实现
  • VueJs路由跳转——vue-router的使用详解
赞 (0)

相关推荐

  • vue登录路由验证的实现

    vue登录路由验证的实现

    vue的项目的登录状态如果用vuex状态管理,页面一刷新vuex管理的状态就会消失,这样登录路由验证就没有意义了.可以将登录的状态写到web Storage中进行存储管理. 步骤如下: 1.在登录组件里,将登录状态写入web Storage里.(一般写入session Storage,会话关闭,存储数据自动删除) if('登录成功') {sessionStorage.setItem('accessToken' , 写入登录成功返回的登录令牌或者自定义的判断字符串) } 2.在需要登录验证的路由元

  • VueJs路由跳转——vue-router的使用详解

    对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成. 安装 基于传统,我更喜欢采用npm包的形式进行安装. npm install vue-router --save 当然,官方采用了多种方式进行安装,包括bower,cdn等. 基本用法 在HTML文档中使用,只需要利用v-link这个directive就行了,如: <a v-link="{path: '/view-a'}">Go to view-a</a> ​p

  • vue获取当前激活路由的方法

    一个 route object(路由信息对象) 表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息,还有 URL 匹配到的 route records(路由记录). route object 是 immutable(不可变) 的,每次成功的导航后都会产生一个新的对象. route object 出现在多个地方: 在组件内,即 this.$route 在 $route 观察者回调内 router.match(location) 的返回值 (在main.js可以获取当前激活路由信息)

  • Vue获取DOM的几种方法总结

    目录 Vue获取DOM的方法 1.使用DOM API直接找元素 2.refs 3.使用自定义指令 vue3.0获取虚拟dom方法 Vue获取DOM的方法 Vue实现了MVVM模型,将数据和表现进行了分离,我们只需要更新数据就能使DOM同步更新,但是某些情况下,还是需要获取DOM元素进行操作 本文主要介绍几种在Vue中获取DOM元素的方法 1.使用DOM API直接找元素 <script>     ...     mounted () {         let elm = this.$el.q

  • Vue 获取数组键名的方法

    json 数组结构如下 "head": [{ "brand": "../static/images/brand.svg" }], "main": [{ "教程": [] }, 想要获取 "教程" 这两个字作为标题,.vue中方法如下 <h1> {{Object.keys(sMain)[0]}} <h1> 其中的sMain是父级传下来的数组 import sourc

  • Vue获取表单数据的方法

    Vue获取表单数据的方法

    目录 需求 获取数据并提交 模板过滤器 过滤器的使用场景 总结 需求 使用Vue收集如下用户数据: 获取数据并提交 代码实现: 将value的值与变量属性进行绑定 v-model.trim = 'username' ; 去除两端空格 v-model.number = 'age':将字符串转为数值 v-model.lazy = 'age' : 不是立即收集,而是切换焦点后收集 <!DOCTYPE html> <html lang="en"> <head>

  • vue不通过路由直接获取url中参数的方法示例

    前言 众所周知vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接在url后面拼接?mid=100的方式传递参数更灵活,你不需要设置路由,只需要在url后拼接参数即可,但是这种方式就需要通过javascript获取并提取url中的参数,通过传统的方式直接在页面中获取是行不通的了,因为vue中是无法通过location.search()来获取url问号之后的内容的. 当然,这个问题也有解决方法,就是把

  • vue获取路由详细内容信息方法实例

    目录 前言: 路由(router)的信息: 获取路由的所有信息 获取路由中每个信息的单个值 获取路由中需要显示的值 补充:vue $router和$route的区别 总结: 前言: vue 中路由(router)的功能就是:把 url 与 应用中的对应的组件进行关联,通过不同的 url 访问不同的组件.但是如果我们想要获取路由中的信息改如何做呢,今天我就给大家详细讲解一下如何获取路由的详细信息. 路由(router)的信息: routes: [ { path: '/', redirect:'lo

  • Vue Router 实现动态路由和常见问题及解决方法

    个人理解:动态路由不同于常见的静态路由,可以根据不同的「因素」而改变站点路由列表.常见的动态路由大都是用来实现:多用户权限系统不同用户展示不同导航菜单. 如何利用Vue Router 实现动态路由 Vue项目实现动态路由的方式大体可分为两种: 前端将全部路由规定好,登录时根据用户角色权限来动态展示路由: 路由存储在数据库中,前端通过接口获取当前用户对应路由列表并进行渲染: 第一种方式在很多Vue UI Admin上都实现了,可以去读一下他们的源码理解具体的实现思路,这里就不过多展开.第二种方式现

  • Vue 权限控制的两种方法(路由验证)

    下面介绍两种权限控制的方法: 路由元信息(meta) 动态加载菜单和路由(addRoutes) 路由元信息(meta) 如果一个网站有不同的角色,比如 管理员 和 普通用户 ,要求不同的角色能访问的页面是不一样的 这个时候我们就可以 把所有的页面都放在路由表里 ,只要 在访问的时候判断一下角色权限 .如果有权限就让访问,没有权限的话就拒绝访问,跳转到404页面 vue-router 在构建路由时提供了元信息 meta 配置接口,我们可以在元信息中添加路由对应的权限,然后在路由守卫中检查相关权限,

  • vue 刷新之后 嵌套路由不变 重新渲染页面的方法

    解决嵌套路由刷新时,路由没有变化,正常情况下页面是不会重新渲染的 1.在router-view中加上条件渲染 v-if 默认为true.让它显示出来 2.写写一个reload方法,在页面刷新只有,点击某个查询条件的时候调用这个重载的方法 这是条件渲染变化了为false 在修改数据之后使用 $nextTick, 条件渲染变化了为true 则可以在回调中获取更新后的 DOM 如果需要带有查询参数,可以用编程试导航,query来传参,但是这种方式可能刷新之后会有问题. 我的解决方法是在刷新之后点击页面

  • vue router 配置路由的方法

    用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们. 路由的基本实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&

随机推荐