高级路由 vue-router@4.2.5

1. 编程式路由导航

编程式路由导航是 Vue Router 中的一项重要功能，它允许你通过编程的方式来控制页面的跳转，而不是依赖于 <router-link>组件。

脱离<Routerlink>实现路由跳转, 实际项目中, 编程式路由导航使用频率远远高于<RouterLink>

<!-- App.vue -->

<script setup lang="ts">
  import { onMounted } from 'vue'
  import { useRouter } from 'vue-router'

  const router = useRouter()

  // 三秒后跳转到新闻页
  onMounted(() => {
    setTimeout(() => {
      router.push('/news')
    }, 3000)
  })
</script>

<template>
  <div class="app">
    <h2 class="title">Vue路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">
      <RouterLink to="/home" active-class="active">首页</RouterLink>
      <RouterLink to="/news" active-class="active">新闻</RouterLink>
      <RouterLink replace to="/about" active-class="active">关于</RouterLink>
    </div>
    <!-- 展示区 -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

2. 路由重定向

路由重定向允许你将一个路由路径自动重定向到另一个路由路径。这在以下几种情况下非常有用:

• 保持 URL 的干净：你可以将复杂的 URL 重定向到一个更简洁的 URL。
• 页面迁移：当页面地址发生改变，但你希望用户访问旧地址时能够自动跳转到新地址。
• 默认子路由：在嵌套路由中，你可以将父路由的路径重定向到默认的子路由。
• 维护或临时替代：当某个页面正在维护或被临时替代时，你可以将用户重定向到另一个页面。

一个小 demo, 用于路由跳转后显示第一条新闻

// rotuer/index.ts
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/news',
      component: () => import('@/pages/News.vue'),
      redirect: '/news/detail?id=1&title=新闻 001&content=新闻 001 的内容',
      children: [
        {
          name: 'xiangqing',
          path: 'detail',
          component: () => import('@/pages/Detail.vue'),
          // 第二种写法，可以自己决定传递什么参数
          props: route => route.query || {},
        },
      ],
    },
  ],
})
export default router