vue-router中$route与$router区别

 

今天自己简易搭建个springboot+vue+element的前后端分离项目，在配置vue-router的时候，用this.$router.push(path:"",query:{})传参跳转时，后续获取参数提示undefined。最后发现是用this.$router.query去获取参数，抛出异常。

在这里分析下vue-router中$route与$router的区别。

$router，这个是我们通过实例化得到的，方式如下，它是个全局对象，拥有所有的路由中的对象和属性，例如下面代码中的History对象。

而$route是路由跳转中的一个对象，也就是说每一个路由都有，我们可以获取对应的name,path,params,query等值。相当于每一个实例路由的内置对象，存储当前路由的信息。

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import routers from './routers'

Vue.use(ElementUI)
Vue.use(VueResource)
Vue.use(VueRouter)
Vue.config.productionTip = false

import Admin from './components/Admin.vue'
const routers = [
	{
		path: '/admin',
		name:'Admin',
		component:Admin
		]
	}
]

const router = new VueRouter({
	mode: 'history',
	routes: routers
})

new Vue({
	router,
  render: h => h(App),
}).$mount('#app')

代码如下：

//跳转代码
updSchool(index,data){
	this.$router.push({path:"/admin/addschool",query:{schoolId:data.schoolId,method:'update'}});
}

//跳转后页面获取参数


export default{
	name:'schoolById',
	/* params:{
		schoolId:"schoolId"
	}, */
	data(){
		return{
			list:[]
			
			
		}
	},
	methods: {
		onCancel() {
			this.$confirm('确认返回吗?', '提示', {
				//type: 'warning'
			}).then(() => {
				this.$router.push('/admin/school');
			}).catch(() => {
			
			});
		},
		getSchoolById(schoolId){
			console.log(schoolId);
			var api = 'http://localhost:8088/school/selectSchoolById?schoolId=' + schoolId ;
			this.$http.get(api).then((response)=>{
				console.log(response);
				if(response.status == '200'){
					this.list = response.body;
					console.log(this.list);
				} else {
					 console.log('error show!');
				} 
				
			},(err)=>{
				
			}
			);
		}
	},
	mounted(){
		console.log(this.$route.query);
		this.getSchoolById(this.$route.query.schoolId);//注意这里，使用的是this.$route.query,而不是上面使用的我们自己实例的router
	}
}