Vue中$router和$route的区别

Vue中 $router 和 $route 的区别:

$router

$router是去全局的一个路由实例(全局变量),

1. this.$router.push({path: '/login'}); // 路由跳转, 向 history 中增加一条记录
2. this.$router.go(-1); // 路由前进(正数)或者后退(负数), 0刷新当前页面
3. this.$router.replace({path: '/login'}); // 在 history记录中替换当前路径, 不记录.

$route

$router是一个跳转的路由对象(局部变量), 每一个路由都有自己的route, route中记录了当前路由的跳转的name, path, params, query;
获取的时候, this.$route.path, this.$route.query

路由传参

1. query方式传参数

this.$router.push({path: '/user', query: {id: '27001'}});

// 获取参数方式:
this.is = this.$route.query.id;

2. 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)}
},