路由信息

@useRoute()

Introduction

. 应用开发中，需要获取路由携带的数据，如查询路由或动态路由

. 可以使用全局路由变量 $route 或者useRoute() 获取

路由信息

$route

. 全局路由变量

. 可以在模板/结构中直接使用 - 更方便、更简洁

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

useRoute()

. Vue-router 提供的组合式函数；适用 Vue 3 的 Composition API

. 返回一个 RouteLocationNormalizedLoaded 对象，用于访问当前/激活路由的各种路由信息

. 先引入再使用 - 引入路由包 useRoute 并创建路由实例 route

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

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

. 以实例属性的形式给出

. 可以用在结构或逻辑中

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

console.log(route)

useRoute 常用属性
分类	说明
name	匹配的路由名称 Name of the matched record
path	经过百分号编码的 URL 中的 pathname 段 Percentage encoded pathname section of the URL.
params	动态路由信息；从 path 中提取出来并解码后的参数对象 Object of decoded params extracted from the path.
query	查询路由信息；代表当前地址的 search 属性的对象 Object representation of the search property of the current location.
matched	匹配路由；数组，只包含直接的组件 (任何已被加载并在 components 对象内被替换掉的懒加载组件) 可以被直接用于展示路由。不包含重定向记录

Drill

[] 详情页 DetailView.vue - 根据 id 加载对应的商品

方案1：直接在结构中获取并使用

<div>params: {{ $route.params.id }}</div>

方案2：在逻辑中获取并使用

onMounted(() => {
  console.log(route.params.id)
  // fetch()
  // axios()
})

Summary & Homework

Summary

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

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

Homework

[] 分享页面 - 添加商品 id 作为查询路由参数

分享 URL - 增加特定的信息

const share = () => {
    router.push({ query: { id: 100, user: 'xinhua' } })
}

使用 - 如果没有，就强推 999 号商品

onMounted(() => {
    const id = route.query.id || 999
    // axios.get(`/api/todo/${id}`).then(res => {})
})

[] 找人代付 - 添加用户订单信息作为查询路由参数

[] 路由元数据 meta 应用

登录引导页路由配置

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

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

如果所有页面都需要更新 title，使用导航守卫更方便

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

应用2：动态样式；根据 showNav 决定页面视图是否显示主导航 - 使用全局路由变量 $route

隐藏主导航组件 AppNav.vue

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

应用3：身份验证；根据 requiresAuth 决定页面视图是否需要身份验证

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

无须监听 watch

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