community/tutorials/vue/routing

Vue Router 是 Vue.js 应用程序中用于页面路由管理的重要库。它允许你定义路由规则，并控制不同组件的渲染，从而实现单页面应用程序（SPA）的导航效果。

路由基础

Vue Router 提供了以下基本功能：

• 定义路由：通过定义路由组件，可以创建一个路由映射表。
• 配置路由：在路由配置中，你可以指定路由的路径、组件以及一些其他选项。
• 导航：使用 router.push() 或 router.replace() 方法进行页面导航。

路由配置

在 Vue 应用程序中，通常在 router/index.js 文件中配置路由。以下是一个简单的路由配置示例：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import Tutorial from '@/components/Tutorial.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/tutorials',
      name: 'tutorials',
      component: Tutorial
    }
  ]
});

动态路由匹配

Vue Router 支持动态路由匹配，允许你根据 URL 中的参数动态渲染组件。以下是一个动态路由匹配的示例：

{
  path: '/user/:id',
  name: 'user',
  component: User,
  props: true
}

在这个例子中，:id 是一个动态参数，它的值将被传递给 User 组件。

路由守卫

Vue Router 提供了路由守卫，允许你在路由发生变化时执行一些逻辑。例如，你可以在全局守卫中检查用户是否已经登录：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth) && !isUserLoggedIn()) {
    next('/login');
  } else {
    next();
  }
});

在这个例子中，requiresAuth 是一个路由元信息，表示该路由需要用户登录。

更多资源

想要了解更多关于 Vue Router 的信息，请访问我们的官方文档：Vue Router 官方文档。

Vue Router