路由信息

@useRoute()
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应用 - 根据 showNav 决定页面视图是否显示主导航
1. LoginGuide.vue - 隐藏主导航组件 AppNav.vue
{
  path: "/login-guide",
  name: "login-guide",
  component: () => import("../views/LoginGuide.vue"),
  meta: { showNav: true },
}
<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 }" />
[] 利用匹配路由 matched 创建面包屑导航
无须监听 watch
<div class="bread">
  <div v-for="(item, index) in $route.matched" :key="index">{{ item.name }}/</div>
</div>