重庆电子网站建设岳阳市官网

vue-router 之如何在模版（template）中获取路由配置信息？

获取当前路由信息

在vue3 中，route通常使用useRoute()钩子获取的，**代表当前激活的路由信息。**它包含了与当前路由相关的数据，比如路径、参数、查询字符串、路由名称等。

route = useRoute()返回的是一个响应式对象，对象的属性包括：
path：当前路由的路径；
params：路由参数；
query：查询字符串参数；
name：路由的名称；
fullpath：完整的路径字符串，包含查询参数和哈希。

import { useRoute } from 'vue-router'
const route = useRoute()

获取路由配置

router.options.routes是在路由实例中的访问路由配置的方式，但是在 Vue Router 4.x 中不推荐使用。

import { useRouter } from 'vue-router'
const ruoter = useRouter()
const routes = router.options.routes()

当前推荐使用在创建路由实例router时，将路由配置导出保存，之后使用时直接引入访问。

import routes from  '../../router/route.js'
console.log(routes)

输出打印如下：