$route

$route表示当前路由，用于获取当前路径，路由中的动态片段，路径中的查询参数等信息

 

  • $route.path——当前路由的绝对路径，如"/foo/bar"

 

  • $route.params——当前路由中动态片段的键值对
{path: '/test/:id', component: resolve => require(['@/components/test/index'], resolve)},

在路由 ​​/test/1​​ 中，$route.params的值为 { "id": "1" }

 

  • $route.query——当前路由中查询参数的键值对

在路由“ ​​/test/1​​​​?name=朝阳 ​​​”​​中，​​$route.query的值为 { "name": "朝阳" }

 

  • $route.name——当前路由的名称，如“测试”
{name:'测试', path: '/test/:id', component: resolve => require(['@/components/test/index'], resolve)},

 $router

$router是全局路由的实例，用于实现路由的跳转

this.$router.push({name:'测试',params:{id:1}}); //会向 history 栈添加一个新的记录

跳转到名称为测试，动态片段为1的页面，即​​/test/1​​

 

this.$router.push({path:'/test/1',query:{name:'朝阳'}}); //会向 history 栈添加一个新的记录

跳转到路径为/test/1，查询参数为name=朝阳，即“ ​​/test/1​​​​?name=朝阳 ​​”

 

this.$router.go(-1); // 回到上一页
this.$router.replace('/'); // 使用 / 路由对应的页面，替换当前页面，不会向 history 栈添加一个新的记录