Vue 3 路由简单应用

Vue Router 是 Vue.js 的官方路由管理器。它和 Vue.js 的核心深度集成，使得构建单页面应用（SPA）变得简单而高效。Vue 3 是 Vue.js 的最新主要版本，它带来了许多新特性和改进，相应地，Vue Router 也进行了更新以充分利用这些新特性。

Vue Router 的安装和使用

首先，你需要安装 Vue Router。如果你使用 Vue CLI 创建项目，可以在创建时直接包含 Vue Router。如果是现有项目，可以通过 npm 或 yarn 进行安装：

shell 复制代码

npm install vue-router@next
# 或者
yarn add vue-router@next

接下来，你需要在你的 Vue 应用中设置路由。这涉及到创建一个路由器实例并将其传递给 Vue 应用实例：

javascript 复制代码

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

// 定义路由
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

// 创建路由器实例
const router = createRouter({
  history: createWebHistory(),
  routes,
});

// 创建并挂载根实例
const app = createApp(App);
app.use(router);
app.mount('#app');

路由导航

一旦设置了路由，你就可以在应用中通过 <router-link> 组件来导航。例如：

html 复制代码

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

<router-link> 会被渲染为带有正确 href 属性的 <a> 标签，但是它会阻止浏览器默认的链接点击行为，从而避免重新加载页面。

路由视图

当路由匹配时，相应的组件将会被渲染到 <router-view> 组件中：

html 复制代码

<router-view></router-view>

核心概念

动态路由匹配

Vue Router 允许你定义动态路由，这些路由可以匹配多种模式，并且可以根据 URL 参数来渲染组件：

javascript 复制代码

const routes = [
  { path: '/users/:id', component: User },
];

在组件内，你可以通过 this.$route.params.id 来访问这个动态段。

嵌套路由

Vue Router 也支持嵌套路由，允许你构建更复杂的应用结构：

javascript 复制代码

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        // 当 /user/:id/profile 匹配成功，
        // UserProfile 将被渲染在 User 的 <router-view> 中
        path: 'profile',
        component: UserProfile,
      },
    ],
  },
];

导航守卫

导航守卫是一些可以在路由导航发生之前或之后执行的钩子。它们可以用来保护路由，解析数据，或者做一些在路由转换时的通用需求：

javascript 复制代码

router.beforeEach((to, from, next) => {
  // 检查用户是否登录
  if (to.meta.requiresAuth && !auth.isLoggedIn()) {
    next('/login');
  } else {
    next();
  }
});

路由元信息

在 Vue Router 中，你可以为每个路由定义额外的信息，即元信息（meta fields）。这些信息在路由对象的 meta 字段内定义，并且可以在导航守卫中访问，用来控制访问权限、设置页面标题等。

javascript 复制代码

const routes = [
  {
    path: '/secure',
    component: SecurePage,
    meta: { requiresAuth: true }
  },
  {
    path: '/public',
    component: PublicPage,
    meta: { title: 'Public Page' }
  },
];

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 此路由需要授权，请检查是否已登录
    // 如果没有，重定向到登录页面
    if (!isLoggedIn()) {
      next('/login');
    } else {
      next();
    }
  } else {
    next(); // 确保一定要调用 next()
  }

  if (to.meta.title) {
    document.title = to.meta.title;
  }
});

过渡效果

Vue Router 允许你为路由之间的切换添加过渡效果。这是通过将 <router-view> 包裹在 <transition> 元素内实现的。

html 复制代码

<transition name="fade" mode="out-in">
  <router-view></router-view>
</transition>

然后你可以在 CSS 中定义过渡样式：

css 复制代码

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}

路由懒加载

路由懒加载是一种优化技术，用于减少应用的初始加载时间。通过将每个路由页面分成独立的代码块，这些代码块只有在用户实际访问该路由时才会被加载。

在 Vue Router 中，你可以通过动态导入（使用 import() 语法）来定义路由组件，这会告诉 Webpack 自动将这个组件分割成一个单独的代码块。

javascript 复制代码

const User = () => import('../components/User.vue');

const routes = [
  {
    path: '/user/:id',
    component: User
  }
];

路由状态

Vue Router 的状态是响应式的，这意味着你可以从任何组件内访问当前路由信息，并且当路由改变时，任何依赖这些信息的组件都会自动更新。路由对象 $route 和路由器实例 $router 提供了访问当前路由状态的接口。

$route 包含了当前路由的信息，如路径、查询参数、散列值等。
$router 是路由器实例，允许你进行编程式的导航，如 $router.push 或 $router.replace。

javascript 复制代码

export default {
  computed: {
    // 使用计算属性来返回当前路由的状态
    username() {
      // 假设路径是 /user/username
      return this.$route.params.username;
    }
  }
};

在 Vue 3 中，由于 Composition API 的引入，你还可以使用 useRoute 和 useRouter 这样的组合式函数来访问路由状态和路由器实例。

javascript 复制代码

import { useRoute, useRouter } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    // 使用 route 和 router 对象
  }
};