Vue中 $router 和 $route 的区别:
$router
$router是去全局的一个路由实例(全局变量),
this.$router.push({path: '/login'}); // 路由跳转, 向 history 中增加一条记录
this.$router.go(-1); // 路由前进(正数)或者后退(负数), 0刷新当前页面
this.$router.replace({path: '/login'}); // 在 history记录中替换当前路径, 不记录.
$route
$router是一个跳转的路由对象(局部变量), 每一个路由都有自己的route, route中记录了当前路由的跳转的name, path, params, query;
获取的时候, this.$route.path, this.$route.query
路由传参
- query方式传参数
this.$router.push({path: '/user', query: {id: '27001'}});
// 获取参数方式:
this.is = this.$route.query.id;
- params 方式传递参数
this.$router.push({name: 'user', params: {id: '27001'}});
// 获取参数方式
this.id = this.$route.params.id;
需要注意的是使用params传参的时候, 路由配置必须按照以下方式来配置, name属性必须有, path后面必须写上传递的参数名, 这样才能保证刷新页面的时候, 参数不会被丢失.
{
path:'/user/:id',
name: 'user',
component: (resolve) => { require(['../components/user/index.vue'], resolve)}
},