Vue中$route和$router的区别

$router：用来操作路由，$route：用来获取路由信息

$router其实就是VueRouer的实例，对象包括了vue-router使用的实例方法，还有实例属性，我们可以理解为$router有一个设置的含义，比如设置当前的跳转，设置当前的返回。

$route指的是当前跳转到该路由页面的相关路由属性。

this.$router

全局的 router 实例。通过 vue 根实例中注入 router 实例，然后再注入到每个子组件，从而让整个应用都有路由功能。其中包含了很多属性和对象（比如 history 对象），任何页面也都可以调用其 push(), replace(), go() 等方法。

跳转

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })

返回

• $router.go()指的是跳转history模式下的某一次记录，可以接收参数，参数可以为负数，-1就代表返回一级，多次点击，多次返回直到初始位置为止
• $router.back()指的是返回，逐条前进到history记录中，一级一级的返回，内部不接收参数
• $router.forward()指的是前进，逐条前进到history记录中，一级一级的前进，内部不接收参数

this.$route

当前激活的路由的信息对象。每个对象都是局部的，可以获取当前路由的 path,name, params, query 等属性。

主要属性

• fullPath：完成解析后的url，包含查询参数和hash完整的路由路径
• hash: 当前路由的hash值，如果没有hash返回空字符串
• matched: 数组，包含当前匹配的路径中所有包含的片段和配置参数
• meta: 路由的相关配置
• name: 路由名称
• path：路由地址
• query：携带参数，和path匹配
• params：携带参数，和name匹配

附图