刚刚接触前端尤其是刚接触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,理解到这个程度就可以了,使用很少会去操作这个东西,大家做一个了解就行了。
以上就是个人拙见,如有纰漏,还望各位看官不吝指正,需要更详细更专业的解释的朋友还是去看官方文档吧。