Vue Router 4 路由地址详解 vue router路由配置

在学习其他路由知识之前，先来看一个最基础的知识点 - 路由地址。

路由最基本的操作是从一个地址跳转到另外一个地址。

如果每一个路由地址相当于地图中某个点的坐标，那么想要去某个点，就得先知道初始点坐标以及目标点坐标，然后规划路线，最后到达目的地，至于怎么样到达我们暂不讨论，后续会一一说明。

路由跳转也是同样的道理。

通过路由地址信息，我们可以获取到路由最基本的路由路径、路由传递的参数、hash等，方便我们实际的操作使用。

路由地址中的属性请自行参考官方文档中API部分的 RouteLocationNormalized

当前路由地址获取

使用useRoute获取当前的路由地址

import { useRoute } from 'vue-router'

// 获取到当前路由的标准的路由地址
const route = useRoute()
console.log(route) 

通过router实例的currentRoute属性获取当前的路由地址

import { useRouter } from 'vue-router'

const router = useRouter()
// 获取当前的路由地址
// 类型为 Ref<RouteLocationNormalized>
router.currentRoute

用户级的路由地址

通常把通过router.push或者router.replace跳转时配置的路由地址称为用户级路由地址

用户级路由地址通常也被当做目标路由地址

// 保存用户级路由地址
let addr = ''

// 1. path?query#hash 字符串路由地址跳转
addr = '/home/route-addr?name=123#456'

// 2. path + query + hash组合成路由地址跳转
addr = {
	path: '/home/route-addr',
  query: {
  	name: 123
  },
  hash: '#456
}

// 3. name + query + hash组合成路由地址跳转
addr = {
	name: 'home.route-addr',
  query: {
  	name: 123
  },
  hash: '#456
}

// 以上路由地址为等价的三种方式，解析之后，没有区别

// 4. name + params + hash模式
// 注意：在name + params + hash模式中，需要注意当前的vue-router版本
// 如果当前的vue-router版本为4.0.x，则直接使用即可
addr = {
	name: 'home.route-addr',
  params: {
  	name: 123
  },
  hash: '#456
}
// 如果当前的vue-router版本为4.1.x及以上，则需要做如下配置
// 在router/index.js文件
// 配置参数通配符:name
const routes = [
	// 其他路由记录...
  // ...
  {
  	name: 'home.route-add',
    path: '/home/route-add/:name',
    component: () => import('@/views/route/RouteAdd.vue')
  }
]

// 5. replace替换路由地址
addr = {
	name: 'home.route-addr',
  query: {
  	name: 'home.route-addr',
  },
  hash: '#route',
  replace: true
}

//路由跳转
// 注意，在第5种情况下，router.push等价于router.replace
// 注意，addr为用户级路由地址
router.push(addr)

导航守卫拦截到的路由地址

路由导航守卫中的to、from均为标准路由地址

注意：前置导航守卫拦截到的地址为通过用户级路由地址转换过来的标准路由地址

// 以前置导航守卫为例，其他导航守卫的to、from和前置导航守卫的一致
// router/index.js文件
// 省略其他代码......

router.beforeEach((to, from) => {
	// to 将要去的目标路由地址
  // from 将要离开的当前路由地址
  // 注意，前置导航守卫拦截到的是所有的路由的跳转操作
  // 他会在路由跳转之前执行
  
  console.log(to)
  console.log(from)
})

从 / 到 /home/route-addr 路由中的to、from如下所示