刚刚接触前端尤其是刚接触Vue的时候，大家大部分都会用到vue-router的库，毕竟对于路由管理这个库足够好，但是有很多朋友可能不太了解router和route的关系，也不知道了解如何在js文件中如何引用router和route，我们先来解决如何在js文件中引用，以便于在js方法中进行读写路由的操作：

第一部分：

解决如何在js中引用router和route，先说router，这个比较简单，我们直接在js文件中引入项目的router.js中的router对象即可使用，而且这个对象也是在main.js中创建Vue实例时的对象，和我们在Vue组件中用的this.$router是一个对象。然后就可以使用router对象进行push、replace、go等操作了。

import router from "../router/router";

在js文件中使用route，就需要router来获取一下了，具体方案是这样的：忽略我的业务部分，我们可以发现，其实就是通过router的app对象（这里的app就是配置了router的Vue根实例，类似于vue组件中的this）获取到了当前的route路由信息，然后就可以愉快地使用route获取路由信息了。

          if (router.app.$route.path.startsWith('/en')){
              router.push('/en/login')
          } else {
              router.push('/login')
          }

第二部分：

到这里，我们解决了提出的问题，接下来我们就详细说说router和route的关系，我们经常把这两个单词都统称为路由，实际上router其实应该叫做路由器，而route才应该被叫做路由，router根据英文词性来看，它是一个操作者，它就是用来对路由进行一些写操作，是能够实实在在修改路由数据的，而route则是一个信息载体，它是用来对当前路由信息进行一些读操作，router只能写，不能读，如果想通过router读，那么久需要像我上面说的那种方式，拿到Vue的示例app对象下的route对象然后进行读操作，还是离不开route对象。route只能进行读操作，它可以读到path、name、meta元数据等等。

----------------下面是官方对于router的关键点------------------

Router 实例

属性

router.app

类型: Vue instance

配置了 router 的 Vue 根实例。

router.mode

类型: string

路由使用的模式。

router.currentRoute

类型: Route

当前路由对应的路由信息对象.

方法

router.beforeEach(guard)
router.beforeResolve(guard) (2.5.0+): 此时异步组件已经加载完成
router.afterEach(hook)

增加全局的导航钩子。参考导航钩子.

router.push(location)
router.replace(location)
router.go(n)
router.back()
router.forward()

动态的导航到一个新 url。参考编程式导航.
router.getMatchedComponents(location?)

返回目标位置或是当前路由匹配的组件数组（是数组的定义/构造类，不是实例）。通常在服务端渲染的数据预加载时时候。
router.resolve(location, current?, append?)

2.1.0+

解析目标位置（格式和 <router-link> 的 to prop 一样），返回包含如下属性的对象：
```
{
  location: Location;
  route: Route;
  href: string;
}
```
router.addRoutes(routes)

2.2.0+

动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。
router.onReady(callback)

2.2.0+

添加一个会在第一次路由跳转完成时被调用的回调函数。此方法通常用于等待异步的导航钩子完成，比如在进行服务端渲染的时候。

--------下面是官方对于route的说法-------

路由信息对象

一个 route object（路由信息对象） 表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 route records（路由记录）。

route object 是 immutable（不可变）的，每次成功的导航后都会产生一个新的对象。

route object 出现在多个地方:

组件内的 this.$route 和 $route watcher 回调（监测变化处理）;
router.match(location) 的返回值

导航钩子的参数：

router.beforeEach((to, from, next) => {
  // to 和 from 都是 路由信息对象
})

scrollBehavior 方法的参数:

const router = new VueRouter({
  scrollBehavior (to, from, savedPosition) {
    // to 和 from 都是 路由信息对象
  }
})

路由信息对象的属性

$route.path
- 类型: string
  
  字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。
$route.params
- 类型: Object
一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
$route.query
- 类型: Object
  
  一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。
$route.hash
- 类型: string
  
  当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。

$route.fullPath
- 类型: string
  
  完成解析后的 URL，包含查询参数和 hash 的完整路径。
$route.matched
- 类型: Array<RouteRecord>
一个数组，包含当前路由的所有嵌套路径片段的 路由记录 。路由记录就是 routes 配置数组中的对象副本（还有在 children 数组）。
```
const router = new VueRouter({
  routes: [
    // 下面的对象就是 route record
    { path: '/foo', component: Foo,
      children: [
        // 这也是个 route record
        { path: 'bar', component: Bar }
      ]
    }
  ]
})
```
当 URL 为 /foo/bar，$route.matched 将会是一个包含从上到下的所有对象（副本）。
$route.name

当前路由的名称，如果有的话。（查看命名路由）

更多关于vue-router相关的官方文档可以转到这里查看：vue-router官方文档

题外话：有人说还有一个对象叫routes，大家喜欢把routes也放到一起讨论比较，我个人理解这个routes不应该拿来比较，一个是因为它存在感较低，没有什么操作使用空间，第二个是它不是一个功能性对象，它就是作为router实例化时的一个路由数组传入进来，就是一个构造参数数组，里面装着许多个route，在操作路由切换的时候，router会去这个数组中匹配对应的route，理解到这个程度就可以了，使用很少会去操作这个东西，大家做一个了解就行了。

以上就是个人拙见，如有纰漏，还望各位看官不吝指正，需要更详细更专业的解释的朋友还是去看官方文档吧。

已解决：Vue中router和route的关系是什么？如何在外部js文件中引用router和route？本文用通俗的方式讲清楚。

第一部分：

第二部分：

Router 实例

属性

方法

路由信息对象

路由信息对象的属性

猜你喜欢