$route

route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等。表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。

1. $route.path

字符串，对应当前路由的路径，总是解析为绝对路径，如 /foo/bar。

2. $route.params

一个 key/value 对象，包含了 动态片段 和 全匹配片段的键值对，如果没有路由参数，就是一个空对象。

3. $route.query

一个 key/value 对象，表示 URL 查询参数。
例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。

4. $route.hash

当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。锚点

5. $route.fullPath

完成解析后的 URL，包含查询参数和 hash 的完整路径。

6. $route.matched

数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。一个数组，包含当前路由的所有嵌套路径片段的路由记录。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。

const router = new VueRouter({
  routes: [
    // 下面的对象就是路由记录
    { path: '/foo', component: Foo,
      children: [
        // 这也是个路由记录
        { path: 'bar', component: Bar }
      ]
    }
  ]
})

当 URL 为 /foo/bar，$route.matched 将会是一个包含从上到下的所有对象 (副本)。

7. $route.name

当前路径名字

8. $route.meta

路由元信息

route object:

组件内的 this.route和route和route watcher 回调（监测变化处理）;
router.match(location) 的返回值
scrollBehavior 方法的参数
导航钩子的参数：

router.beforeEach((to, from, next) => { 
    // to 和 from 都是 路由信息对象,后面使用路由的钩子函数就容易理解了
})

2.$router对象

全局路由的实例，是router构造方法的实例。通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。 $router.push({path:'home'});

1.push

本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录

    // 字符串 
    this.$router.push('home') 
    // 对象 
    this.$router.push({ path: 'home' }) 
    // 命名的路由 
    this.$router.push({ name: 'user', params: { userId: 123 }}) 
    // 带查询参数，变成 /register?plan=123 
    this.$router.push({ path: 'register', query: { plan: '123' }})

2.go

    // 页面路由跳转 前进或者后退 this.$router.go(-1) // 后退

3.replace

push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，
不会向 history 栈添加一个新的记录。一般使用replace来做404页面\

this.$router.replace('/')

配置路由时path有时候会加 '/' 有时候不加,以'/'开头的会被当作根路径，就不会一直嵌套之前的路径。

4.resolve

需要在点击事件或函数中实现打开新页面，新窗口打开需求时

const {href} = this.$router.resolve({
                path: "/跳转的页面路由",
                query:{//要传的参数
                    id:this.id
                }
            });
            window.open(href, '_blank');//打开新的窗口

vue $route 和 $router的区别与使用