路由信息

@useRoute()

vue-router 提供的组合式函数，返回一个 RouteLocationNormalizedLoaded 对象，用于访问当前/激活路由的各种路由信息

常见的路由信息有：fullPath、path、name、params、query、meta 等

先引入再使用 - 引入路由包 useRoute 并创建路由实例 route；模块化开发请参考 Module

适用 Vue 3 的 Composition API

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

<div>route {{ route.fullPath }}</div>

useRoute 常用属性
分类	说明
name	匹配的路由名称
path	经过百分号编码的 URL 中的 pathname 段
params	从 path 中提取出来并解码后的参数对象
query	代表当前地址的 search 属性的对象
matched	匹配路由；数组，只包含直接的组件 (任何已被加载并在 components 对象内被替换掉的懒加载组件) 可以被直接用于展示路由。不包含重定向记录

$route

直接在模板中使用

无须引入路由包 useRoute 并实例化

<div>route {{ $route.fullPath }}</div>

Summary & Homework

Summary

逻辑中使用 - 引入路由包 useRoute 并实例 route

结构中使用 - 全局路由变量 $route

Homework

[] meta应用

路由元数据配置示例

{
  path: "/login-guide",
  name: "login-guide",
  component: () => import("../views/LoginGuide.vue"),
  meta: {
    title:"登录", 
    showNav: true,
    requiresAuth: true,
  },
}

应用1：显示标题 title - 代码是否健壮？如何验证 title的有效性？

onMounted(() => {
  document.title = route.meta.title
})

应用2：动态样式；根据 showNav 决定页面视图是否显示主导航

1. LoginGuide.vue - 隐藏主导航组件 AppNav.vue

<AppNav v-if="!$route.meta.showNav" />

2. ProductView.vue - 根据是否显示主导航指定购物车位置；后续还要判断是否有商品来决定是否显示购物车

{
  path: "/product",
  name: "product",
  component: () => import("../views/ProductView.vue"),
  meta: { showNav: true },
}

<Cart :class="{ 'pos': $route.meta.showNav }" />

应用3：身份验证；根据 requiresAuth 决定页面视图是否需要身份验证；详情请访问路由导航守卫

[] 利用匹配路由 matched 创建面包屑导航

无须监听 watch

<div class="bread">
  <div v-for="(item, index) in $route.matched" :key="index">{{ item.name }}/</div>
</div>