router和route的区别

在组件的实例化对象里面，有$router和$route两个属性，this.$router就是路由的实例化对象，this.$route是该组件对应的活跃路由，里面的有组件具体的路径之类的配置信息

this.$router是全局路由器对象 this.$route是当前激活的路由对象，包含了当前的路由信息

//这个组件是有路径的，因为这个是在路由里面注册过的组件
VueComponent {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
$attrs: Object
$children: []
$createElement: ƒ (a, b, c, d)
$el: div
$listeners: (...)
$options: {parent: VueComponent, _parentVnode: VNode, propsData: undefined, _parentListeners: undefined, _renderChildren: undefined, …}
$parent: VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
$refs: {}
$root: Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
$scopedSlots: {$stable: true, $key: undefined, $hasNormal: false}
$slots: {}
$vnode: VNode {tag: 'vue-component-4-OtherTing', data: {…}, children: undefined, text: undefined, elm: div, …}
__VUE_DEVTOOLS_UID__: "app-1:2"
_c: ƒ (a, b, c, d)
_data: {__ob__: Observer}
_directInactive: false
_events: {hook:beforeDestroy: Array(1)}
_hasHookEvent: true
_inactive: null
_isBeingDestroyed: false
_isDestroyed: false
_isMounted: true
_isVue: true
_renderProxy: Proxy {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
_routerRoot: Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
_self: VueComponent {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
_staticTrees: null
_uid: 2
_vnode: VNode {tag: 'div', data: undefined, children: Array(2), text: undefined, elm: div, …}
_watcher: Watcher {vm: VueComponent, deep: false, user: false, lazy: false, sync: false, …}
_watchers: [Watcher]
$data: (...)
$isServer: (...)
$props: (...)
$route: Object//这个就是动态路由
$router: VueRouter//这个就是实例化的路由，new VueRouter 过的实例化对象
$ssrContext: (...)
get $attrs: ƒ reactiveGetter()
set $attrs: ƒ reactiveSetter(newVal)
get $listeners: ƒ reactiveGetter()
set $listeners: ƒ reactiveSetter(newVal)
[[Prototype]]: Vue

2.this.$router的方法：

1.字符串 this.$router.push('/home')
2.对象  this.$router.push({path:'home'})
3.命名的路由 this.$router.push({name:'home',params:{id:1}})
4.带查询参数 this.$router.push({path:'home',query:{id:1}})

3、路由跳转方式:

1.声明式：<router-link :to="">
2.编程式：this.$router.push();

4、path:'name' 和 path:'/name' 区别：

假如当前路径是home

this.$router.push('/name') =>  /home/name
this.$router.push('name')  =>  /name