$route常用的方法解释

$route获取的是当前url地址的信息,通过$route可以拿到的数据包括

fullPath: "/Namevue/test"   

router: ""     //路由规则所属的路由器

name: "Namevue"    //当前路径的名字,如果没有使用具名路径,则名字为空

params: {id: "test"}    //路由中的定义的动态片段和全匹配片段的键值对

path: "/Namevue/test"    //当前路由对象的路径,会被解析为绝对路径,如 "/home/news"

query: {}   //路由中查询参数的键值对。例如,对于 /home/01?favorite=yes ,会得到$route.query.favorite == ‘yes‘ 。

注意:query和params的区别

params传递参数需要在路由文件中进行配置,例如  path: "/detail/:id/:name",    component: Detail,最终url生成的路径是detail/10/apple , 传参的方式是: this.$router.push({ path: "/detail/"+id });

query可以直接传递参数,且最终的url格式是 detail?id=10,传参的方式是:this.$router.push({ path: "/detail",query:{id:this.id}});

query和params获取参数传递参数都是通过当前路由 this.$route


当前路径:{{$route.path}}

当前参数:{{$route.params | json}}

路由名称:{{$route.name}}

路由查询参数:{{$route.query | json}}

路由匹配项:{{$route.matched | json}}

query查询跳转使用方法有2种

1、在router-link直接使用    HelloWorld

2、在点击事件调用方法使用

handlclick(){

       this.$router.push({

         path:"/HelloWorld",

         query:{

           name:"lili",

           age:'31'

         } });

在方法中使用$route前面是需要加this的,在元素中使用是不用的直接$route

你可能感兴趣的:($route常用的方法解释)