阅读数:145 评论数:0

一、动态路由

vue3必须使用vue-router4，而router4去掉了addRoutes，只能使用addRoute

二、不匹配url跳转到404

1、首先，你需要一个 404 组件，这个组件将会被显示当路由不匹配时：

// NotFoundComponent.vue
<template>
  <div>
    <h1>404 - Page Not Found</h1>
    <p>The page you are looking for was not found.</p>
  </div>
</template>

<script>
export default {
  name: 'NotFoundComponent'
}
</script>

2、配置路由

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import NotFoundComponent from './views/NotFoundComponent.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    // ...其他路由...
    {
      path: '/:pathMatch(.*)*', // Vue Router 4 中的通配符
      name: 'NotFound',
      component: NotFoundComponent,
    },
  ],
});

export default router;

在上面的代码中，path: '*' 表示匹配所有路径，因此任何不在路由表中的 URL 都会被这个路由捕获。由于这个路由是放在最后的，所以只有当其他所有路由都不匹配时，它才会被匹配。

三、重定向

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      component: About,
    },
    // 重定向示例与 Vue Router 3 相似
    // ...其他路由...
        {
      path: '/a',
      redirect: '/about'
    },
    // 重定向使用命名路由
    {
      path: '/b',
      redirect: { name: 'about' }
    },
    // 动态重定向，使用箭头函数来返回重定向的目标字符串
    {
      path: '/c',
      redirect: () => {
        // 方法返回重定向的字符串路径
        return '/about'
      }
    },
  ],
});

export default router;

在上面的例子中，我们定义了几种不同的重定向方式：

• 直接重定向：从 /a 到 /about。
• 使用命名路由重定向：这种方法使得重定向不依赖于目标路径的字符串，只需要路由的名字。
• 动态重定向：使用一个函数来决定重定向的路径。这在你需要基于某些逻辑来确定重定向目标时非常有用。