VUE3 Vue Router 是官方的路由管理工具

在 Vue.js 中，Vue Router 是官方的路由管理工具，用于实现单页面应用（SPA）的路由功能。Vue Router 允许你在不同的视图（或页面）之间进行导航，同时保持单一页面的加载，不需要重新加载整个页面。

1. 安装 Vue Router

首先，确保你已经安装了 vue-router：

npm install vue-router

2. 配置 Vue Router

接下来，我会使用 Vue 3 和选项式 API，同时配置 history 模式。history 模式会使 URL 看起来像传统的页面路由，例如 /home 而不是 /home#。

src/router/index.js - 配置路由

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

// 创建路由实例并配置 history 模式
const router = createRouter({
  history: createWebHistory(), // 配置 history 模式
  routes
});

export default router;

src/main.js - 配置 Vue 实例

在 src/main.js 中，我们需要将路由配置传入 Vue 实例中：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App)
  .use(router)  // 使用 Vue Router
  .mount('#app');

src/App.vue - 根组件

在 App.vue 中使用 <router-view> 来渲染当前路由对应的组件，同时可以添加路由导航链接。

<template>
  <div id="app">
    <h1>Vue Router with History Mode</h1>
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view> <!-- 渲染当前路由组件 -->
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

src/views/Home.vue - 首页组件

<template>
  <div>
    <h2>Home Page</h2>
    <p>Welcome to the home page!</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

src/views/About.vue - 关于页组件

<template>
  <div>
    <h2>About Page</h2>
    <p>This is the about page.</p>
  </div>
</template>

<script>
export default {
  name: 'About'
};
</script>

3. 路由模式说明

• createWebHistory(): 这会启用 history 模式，URL 将不会包含 # 符号，类似于传统的多页面应用。
• createWebHashHistory(): 如果你不配置服务器支持 history 模式，你可以使用 hash 模式，这会在 URL 中显示 # 符号，例如 /#/home。

4. 路由守卫（可选）

你可以在 Vue Router 中配置全局导航守卫。例如，你可以创建一个登录守卫，确保用户登录后才能访问某些页面：

router.beforeEach((to, from, next) => {
  const isLoggedIn = false;  // 这里可以替换为你的实际登录状态判断
  if (to.name !== 'Home' && !isLoggedIn) {
    next('/'); // 如果没有登录且访问非主页，跳转到首页
  } else {
    next(); // 继续访问目标路由
  }
});

总结

1. Vue 3 使用了 createRouter 和 createWebHistory（或 createWebHashHistory）来创建路由和配置路由模式。
2. 使用 选项式 API 书写 Vue 组件，确保结构清晰、功能模块化。
3. history 模式 提供了干净的 URL（无 #），适用于现代 Web 应用。

这样，你就可以在 Vue 3 中实现基于 Vue Router 的 history 模式 路由管理了。如果你有更多问题，随时告诉我！

原文地址：https://blog.csdn.net/qq_41192896/article/details/145175804

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！