Vue3 路由基础-JavaScript中文网-JavaScript教程资源分享门户

安装 Vue Router

Vue Router 是 Vue.js 官方的路由管理器。它与 Vue.js 核心深度集成，让构建单页面应用变得非常简单。你可以通过 npm 或者 yarn 来安装 Vue Router。

npm install vue-router@next

或者

yarn add vue-router@next

创建一个简单的路由

首先，我们需要在项目中创建一个新的路由配置文件。假设我们有一个名为 router/index.js 的文件，我们可以在这里定义我们的路由规则。

-- -------------------- ---- -------
------ - ------------- ---------------- - ---- ------------
------ ---- ---- -------------------
------ ----- ---- --------------------

----- ------ - -
  -
    ----- ----
    ----- -------
    ---------- ----
  --
  -
    ----- ---------
    ----- --------
    ---------- -----
  -
-

----- ------ - --------------
  -------- ---------------------------------------
  ------
--

------ ------- ------

在这个例子中，我们定义了两个路由：一个是首页，另一个是关于页。每个路由都有一个路径、一个名称和一个组件。

在主应用中使用路由

接下来，我们需要在我们的主应用文件中引入并使用这个路由配置。通常，这个文件是 main.js 或 main.ts。

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

createApp(App).use(router).mount('#app')

这里我们通过 createApp 函数创建了一个 Vue 应用，并通过 .use() 方法将路由添加到应用中。最后，我们使用 .mount() 将应用挂载到 DOM 中。

路由链接与导航

使用 `<router-link>` 进行导航

为了方便地进行页面间的跳转，Vue Router 提供了一个 <router-link> 组件。我们可以使用它来创建指向特定路由的链接。

-- -------------------- ---- -------
----------
  -----
    -----
      ------------ ------------------------- -
      ------------ -------------------------------
    ------

    ---------------------------
  ------
-----------

在上面的例子中，我们创建了两个链接：一个指向首页，另一个指向关于页。当用户点击这些链接时，对应的组件将会被渲染到 <router-view> 中。

动态路由匹配

有时候，我们可能需要根据 URL 的变化来动态地改变页面的内容。Vue Router 支持动态路由匹配，允许我们在 URL 中包含参数。

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

在这个例子中，:id 是一个动态参数，可以匹配任何值。然后，在组件内部，我们可以通过 this.$route.params.id 访问到这个值。

编程式导航

除了使用 <router-link> 外，我们还可以通过编程方式导航到不同的路由。这在某些情况下非常有用，比如处理表单提交或响应用户操作。

this.$router.push('/about')

或者

this.$router.replace('/about')

这两个方法都可以用来导航到新的路由，区别在于 push 会在历史记录中留下一条记录，而 replace 则不会。

路由守卫

Vue Router 提供了多种类型的路由守卫，用于在进入或离开路由之前执行一些逻辑。常见的有全局守卫、路由独享守卫和组件内的守卫。

全局前置守卫

全局前置守卫允许我们在每次路由切换之前执行一些逻辑，比如权限验证。

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login')
  } else {
    next()
  }
})

在这个例子中，我们检查目标路由是否需要认证，如果需要但用户未登录，则重定向到登录页面。

路由独享守卫

每个路由都可以有自己的独享守卫，这样可以更细粒度地控制路由的行为。

-- -------------------- ---- -------
----- ----- - -
  ----- ---------
  ---------- ------
  --------------- ----- ----- -
    -- ------------ -
      -------------
    - ---- -
      ------
    -
  -
-

组件内守卫

对于组件来说，还可以使用组件内的守卫来执行特定于该组件的逻辑。

-- -------------------- ---- -------
------ ------- -
  -------------------- ----- ----- -
    -- ------------ ------- ---
    ------
  --
  --------------------- ----- ----- -
    -- -------------------
    ------
  --
  -------------------- ----- ----- -
    -- ---------------
    ------
  -
-

以上就是 Vue3 路由的基础部分。通过这些知识，你可以开始构建具有复杂导航逻辑的应用程序了。希望你能继续深入学习，探索更多高级功能！

Vue3 路由基础