用vue router如何获得当前页面的路由？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用vue router如何获得当前页面的路由？相关的知识，希望对你有一定的参考价值。
用vue router如何获得当前页面的路由的方法如下：
路由器将自渲染对应的组件以及更新路由信息：
其中<router-view>可以传递props，支持v-ref,同时也可以使用v-transition和transition-mode来获得场景切换效果，被渲染的组件将注册到父级组件的this.$对象上。
路由对象和路由匹配：
路由对象，即$router会被注入每个组件中，可以利用它进行一些信息的获取。
如属性 说明：
$route.path 当前路由对象的路径，如'/vi
$route.query 请求参数，如/foo?user=1获取到query.user = 1
$route.router 所属路由器以及所属组件信息
$route.matched 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
$route.name 当前路径名字
当然，你也可以在自己定义路由规则（map)的时候自定义字段，用以特殊目的。
这里只是做了一些简单的介绍，最后，更多高级用法请参考官方文档。
参考技术A可以使用vuex-router-sync将router放入到store中进行数据同步，地址: https://github.com/vuejs/vuex...
怎么使用文档很清楚，不再赘述。
加入之后 你在vue devtools控制台就可以看到router属性了。当然也可以取值操作了。
vue-router 路由
vue-router是Vue.js官方的路由插件，用于构建单页面应用。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。
下面是vue-router的登录注册例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>router举例</title> <style> .active{ color:red; } </style> </head> <body> <div id="app"> <!-- 定义路径如何跳转 to属性定义路径 --> <!-- router-link标签默认被解析成a链接 --> <!-- tag属性可以定义具体是哪个标签 --> <router-link to="/login" tag="span">登录</router-link> <router-link to="/resign">注册</router-link> <router-view></router-view> <!-- router-view定义组件显示的容器 --> </div> <script src="lib/vue.js"></script> <script src="vue-router-3.0.1.js"></script> <!-- 引入router文件 --> <script> var tem1 = { template: "<h1>登陆组件</h1>" } var tem2 = { template: "<h1>注册组件</h1>" } // 实例化vuerouter,var routerObj = new VueRouter({}) // 参数routes，是一个数组，定义路由匹配规则（在什么路径下显示什么组件） // routes有两个参数 path和component // path：监听的路由的地址 // component：表示在这个地址下显示哪个组件 // redirect：代表路由的重定向 在这个路径下，把地址重新定义 var routerObj = new VueRouter({ routes: [ { path: "/", redirect: "/login" }, { path: "/login", component: tem1 }, { path: "/resign", component: tem2 }, ], //linkActiveClass定义router-link被激活时的类名 linkActiveClass:"active" }) //把定义的路由规则放在new vue中 var vm = new Vue({ el: "#app", router: routerObj //把定义的路由规则放在new vue中 }) </script> </body> </html>
如果要定义子路由用children表示,它的属性也有path、component
v-router传参：
Ⅰ、query传参
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>query传参</title> </head> <body> <div id="app"> <router-link to="/args?year=90&age=20" >query传参</router-link> <router-view></router-view> </div> <script src="lib/vue.js"></script> <script src="lib/vue-router-3.0.1.js"></script> <script> var tem = { template: "<h1>传参year为{{$route.query.year}}传参age为{{$route.query.age}}</h1>", data(){ return { id:this.$route.query.year, name:this.$route.query.age } }, } var routerObj = new VueRouter({ routes: [ { path: "/", redirect: "/args" }, { path: "/args", component: tem }, ], }) var vm = new Vue({ el: "#app", router: routerObj }) </script> </body> </html>
Ⅱ、params传参
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>params传参</title> </head> <body> <div id="app"> <router-link to="/args/90/20" >params传参</router-link> <router-view></router-view> </div> <script src="lib/vue.js"></script> <script src="lib/vue-router-3.0.1.js"></script> <script> var tem = { template: "<h1>传参year为{{$route.params.year}}传参age为{{$route.params.age}}</h1>", data(){ return { id:this.$route.params.year, name:this.$route.params.age } }, } var routerObj = new VueRouter({ routes: [ { path: "/", redirect: "/args" }, { path: "/args/:year/:age", component: tem }, ], }) var vm = new Vue({ el: "#app", router: routerObj }) </script> </body> </html>
以上是关于用vue router如何获得当前页面的路由？的主要内容，如果未能解决你的问题，请参考以下文章
vue刷新当前路由：router-view 复用组件时不刷新的3种解决方案总结
vue中使用provide和inject刷新当前路由（页面）