vue中$router和$route的区别

$router和$route的区别 

<router-link to="/login/4">点击</router-link>	
<router-link to="/reg?id=5">点击</router-link>	

 

const box=Vue.extend({});
const login=Vue.extend({
	template:'<div>login</div>'
});
const reg=Vue.extend({
	template:'<div>reg</div>'
});
const router=new VueRouter({
	routes:[
                {path:'/login/:id',component:login},
                {path:'/reg/:id',component:reg},
	]
})
	new Vue({
		el:"#box",
		router:router,
		methods:{
			a(){
				console.log(this.$router)
			},
			b(){
				console.log(this.$route)
			}
		}
	})

• route是当前路由信息，可以获取到当前路由地址参数等等；
• router是全局路由实例对象，可以通过router进行路由的跳转后退等等 

this.$router

this.$route

文章 

获取URL参数

使用路由获取页面参数

在路由中设置path：

{
    path: '/detail/:id/',
    name: 'detail',
    component: detail,
    meta: {
        title: '详情'
    }
}

获取参数 

let id = this.$route.params.id

备注:
1、参数名需要保持一致
2、如果路由中没有传参（http://192.168.1.12:8080/#/detail），会报错，页面无法显示，正常页面为 http://192.168.1.12:8080/#/detail/234

如果有的参数可传可不传，可以使用？传参
例如：http://192.168.1.12:8080/#/detail/?id=123
获取的时候：

let id = this.$route.query.id

 这样即使取不到参数，页面也不会报错

query传参，刷新页面不会丢失参数。但是params会丢参的

query通过path切换路由，params通过name切换路由

wenzhang1