vue-router this.$route和this.$router的区别

当你在组件中console.log(this.$route)和console.log(this.$router)
时会发现比较明显的差异

这是this.$route

{name: "Button2", meta: {…}, path: "/button/button2", hash: "",query: {…}, …}
fullPath: "/button/button2?name=dx&age=18"
hash: ""
matched: (2) [{…}, {…}]
meta: {}
name: "Button2"
params: {}
path: "/button/button2"
query: {name: "dx", age: "18"}
__proto__: Object

这是this.$router

VueRouter {app: Vue, apps: Array(1), options: {…}, beforeHooks:Array(0), resolveHooks: Array(0), …}
afterHooks: []
app: Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
apps: [Vue]
beforeHooks: []
fallback: false
history: HTML5History {router: VueRouter, base: "", current: {…}, pending: null, ready: true, …}
matcher: {match: ƒ, addRoutes: ƒ}
mode: "history"
options: {routes: Array(3), mode: "history"}
resolveHooks: []
currentRoute: (...)
__proto__: Object

从某种意义上说this.$route是this.$router的一部分
this.$route指的是当前被激活的路由信息this.$router指的就是router文件夹里面的index.js抛出的内容
也就是以下的内容

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Button',
      component: Button
    },
    {
      path: '/button',
      component: Button,
      children: [
        {
         	path: '/button/button1',
          name: 'Button1',
          component: Button1
        },
        {
        	path: '/button/button2',
          name: 'Button2',
          component: Button2
        }
      ]
    },
    {
      path: '/layout',
      name: 'Layout',
      component: Layout
    }
  ],
  mode: 'history'
})

而this.$route指的是其中某一个被激活的路由
如果当前的路径是这样

http://localhost:8081/button/button2?name=dx&age=18

那this.$route指的就是这一个路径

{
      path: '/button',
      component: Button,
      children: [
        {
         	path: '/button/button1',
          name: 'Button1',
          component: Button1
        },
        {
        	path: '/button/button2',
          name: 'Button2',
          component: Button2
        }
      ]
    },