$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 栈添加一个新的记录