Vue Router 入门：轻松掌握 Vue.js 路由 – wiki基地

作者： /

Vue Router 入门：轻松掌握 Vue.js 路由

在构建单页面应用 (SPA) 的过程中，路由是至关重要的一环。它允许我们在不重新加载整个页面的情况下，根据用户的操作显示不同的内容。Vue Router 是 Vue.js 官方提供的路由管理器，它与 Vue.js 深度集成，使得构建 SPA 变得简单高效。

本文将带你一步步了解 Vue Router 的基本概念、安装配置、常用 API 以及实际应用，让你轻松掌握 Vue.js 路由。

一、什么是 Vue Router？

Vue Router 本质上就是一个 Vue.js 插件，专门用于管理 SPA 的路由。它主要负责以下几个方面：

  • 定义路由规则： 将 URL 路径映射到特定的 Vue 组件。
  • 监听 URL 变化： 监控浏览器地址栏的变化。
  • 渲染对应组件： 根据当前的 URL，动态渲染相应的 Vue 组件。
  • 提供导航功能： 允许用户通过点击链接或执行代码进行页面跳转。
  • 支持嵌套路由： 允许在组件内部定义子路由，构建更复杂的页面结构。

二、安装 Vue Router

在使用 Vue Router 之前，需要先将其安装到项目中。可以使用 npm 或 yarn 进行安装：

使用 npm:

bash
npm install vue-router@4

使用 yarn:

bash
yarn add vue-router@4

请注意，上面的安装命令安装的是 Vue Router 4，它与 Vue.js 3 兼容。如果你使用的是 Vue.js 2，需要安装 Vue Router 3。

三、配置 Vue Router

安装完成后，需要在 Vue 应用中配置 Vue Router。配置过程主要包括以下几个步骤：

  1. 引入 Vue Router： 在 main.js 文件中引入 Vue Router。

    javascript
    import { createApp } from 'vue'
    import { createRouter, createWebHistory } from 'vue-router'
    import App from './App.vue'

  2. 定义路由规则： 创建一个路由数组，每个元素定义一条路由规则。

    javascript
    const routes = [
    { path: '/', component: Home }, // 根路径对应 Home 组件
    { path: '/about', component: About }, // /about 路径对应 About 组件
    { path: '/contact', component: Contact }, // /contact 路径对应 Contact 组件
    ]

    在这里，path 属性定义了 URL 路径，component 属性指定了该路径对应的 Vue 组件。 需要提前引入 Home, About, Contact 组件。

  3. 创建 Router 实例： 使用 createRouter 函数创建一个 Router 实例。

    javascript
    const router = createRouter({
    history: createWebHistory(), // 使用 HTML5 History API
    routes, // 路由规则
    })

    createWebHistory() 创建一个基于 HTML5 History API 的路由历史模式，它允许使用标准的 URL 路径，并且不需要在服务器端进行特殊配置。 还有 createWebHashHistory()可以使用，它使用URL的Hash(#)部分来创建路由，兼容性好，不需要后端配置，但是URL看起来不太美观。

  4. 挂载 Router 实例到 Vue 应用： 使用 app.use() 将 Router 实例挂载到 Vue 应用上。

    javascript
    const app = createApp(App)
    app.use(router)
    app.mount('#app')

    完整的 main.js 文件可能如下所示：

    “`javascript
    import { createApp } from ‘vue’
    import { createRouter, createWebHistory } from ‘vue-router’
    import App from ‘./App.vue’
    import Home from ‘./components/Home.vue’
    import About from ‘./components/About.vue’
    import Contact from ‘./components/Contact.vue’

    const routes = [
    { path: ‘/’, component: Home },
    { path: ‘/about’, component: About },
    { path: ‘/contact’, component: Contact },
    ]

    const router = createRouter({
    history: createWebHistory(),
    routes,
    })

    const app = createApp(App)
    app.use(router)
    app.mount(‘#app’)
    “`

四、使用 Router 组件

Vue Router 提供了两个核心组件，用于在模板中进行导航和渲染组件：

  • <router-link>： 类似于 HTML 的 <a> 标签，用于创建导航链接。

  • <router-view>： 用于渲染当前路由对应的组件。

  • 使用 <router-link>：

    vue
    <template>
    <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/contact">Contact</router-link>
    </nav>
    <router-view></router-view>
    </template>

    to 属性指定了链接的目标 URL 路径。 当 <router-link> 被渲染时，它会自动生成一个带有正确 href 属性的 <a> 标签。

  • 使用 <router-view>：

    <router-view> 组件会根据当前路由，动态渲染对应的组件。 在上面的例子中，当 URL 为 / 时，<router-view> 会渲染 Home 组件；当 URL 为 /about 时，会渲染 About 组件，以此类推。

五、动态路由匹配

Vue Router 允许使用动态路由参数，以便匹配具有相似结构的 URL 路径。 例如，可以使用动态路由参数来显示不同 ID 的用户资料。

  1. 定义动态路由：

    javascript
    const routes = [
    { path: '/user/:id', component: User }, // :id 为动态路由参数
    ]

    在路由定义中，使用冒号 (:) 前缀表示动态路由参数。 上面的例子中，/user/:id 可以匹配 /user/1、/user/2、/user/abc 等 URL 路径。

  2. 获取路由参数：

    在 User 组件中，可以使用 $route.params 对象来获取动态路由参数。

    “`vue


    “`

    $route 是 Vue Router 提供的一个全局对象，它包含了当前路由的信息，包括 params、query、path 等属性。

六、嵌套路由

嵌套路由允许在组件内部定义子路由，用于构建更复杂的页面结构。 例如，可以在 User 组件内部定义子路由，用于显示用户的个人信息、文章列表、相册等。

  1. 定义嵌套路由：

    javascript
    const routes = [
    {
    path: '/user/:id',
    component: User,
    children: [
    { path: 'profile', component: UserProfile }, // /user/:id/profile
    { path: 'posts', component: UserPosts }, // /user/:id/posts
    { path: 'albums', component: UserAlbums }, // /user/:id/albums
    ],
    },
    ]

    在 User 组件的 children 属性中，定义了三个子路由：profile、posts 和 albums。 这些子路由的 path 属性是相对于父路由的。

  2. 在父组件中使用 <router-view>：

    在 User 组件的模板中，需要使用 <router-view> 组件来渲染子路由对应的组件。

    vue
    <template>
    <div>
    <h1>User ID: {{ $route.params.id }}</h1>
    <nav>
    <router-link :to="{ path: 'profile' }">Profile</router-link> |
    <router-link :to="{ path: 'posts' }">Posts</router-link> |
    <router-link :to="{ path: 'albums' }">Albums</router-link>
    </nav>
    <router-view></router-view>
    </div>
    </template>

    注意，在嵌套路由中，<router-link> 的 to 属性可以是相对路径或绝对路径。 如果使用相对路径，则会相对于当前路由进行解析。 在这个例子中，:to="{ path: 'profile' }" 会生成 /user/:id/profile 这样的 URL。

七、编程式导航

除了使用 <router-link> 组件进行导航之外，还可以使用编程式导航 API，通过 JavaScript 代码进行页面跳转。

  1. 使用 router.push()：

    router.push() 方法用于跳转到指定的 URL。

    javascript
    // 在组件中
    this.$router.push('/about') // 跳转到 /about 路径
    this.$router.push({ path: '/about' }) // 效果同上
    this.$router.push({ name: 'user', params: { id: '123' } }) // 根据路由名称和参数跳转
    this.$router.push({ path: '/search', query: { q: 'vue' } }) // 跳转到 /search?q=vue

    router.push() 方法接受一个字符串或一个对象作为参数。 如果传递一个字符串，则表示要跳转的 URL 路径。 如果传递一个对象，则可以指定 path、name、params、query 等属性，用于构建更复杂的 URL。

  2. 使用 router.replace()：

    router.replace() 方法与 router.push() 方法类似，但是它会替换当前的浏览历史记录，而不是添加一条新的记录。 这意味着用户无法通过点击浏览器的后退按钮返回到之前的页面。

    javascript
    this.$router.replace('/about') // 替换当前历史记录为 /about

  3. 使用 router.go()：

    router.go() 方法用于在浏览历史记录中前进或后退。

    javascript
    this.$router.go(-1) // 后退一步
    this.$router.go(1) // 前进一步

八、命名路由

命名路由允许为路由规则指定一个名称，以便在代码中使用名称来引用该路由。

  1. 定义命名路由：

    javascript
    const routes = [
    { path: '/user/:id', component: User, name: 'user' }, // 定义路由名称为 user
    ]

    在路由定义中，使用 name 属性指定路由的名称。

  2. 使用命名路由进行导航：

    “`vue
    User 123

    // 使用编程式导航
    this.$router.push({ name: ‘user’, params: { id: ‘123’ } })
    “`

    使用命名路由可以使代码更加清晰易懂，并且可以避免硬编码 URL 路径。

九、导航守卫

导航守卫允许在路由跳转前后执行一些操作，例如进行身份验证、权限检查、数据加载等。 Vue Router 提供了三种类型的导航守卫：

  • 全局守卫： 在所有路由跳转前后执行。
  • 路由独享守卫： 只在特定的路由跳转前后执行。

  • 组件内守卫： 只在组件内部的路由跳转前后执行。

  • 全局守卫：

    • beforeEach：在每次路由跳转之前执行。
    • afterEach：在每次路由跳转之后执行。

    “`javascript
    router.beforeEach((to, from, next) => {
    // to: 即将要进入的目标 路由对象
    // from: 当前导航正要离开的路由
    // next: 调用该方法后，才能进入下一个钩子
    if (to.meta.requiresAuth) {
    // 检查用户是否已登录
    if (isAuthenticated()) {
    next() // 允许进入路由
    } else {
    next(‘/login’) // 重定向到登录页面
    }
    } else {
    next() // 允许进入路由
    }
    })

    router.afterEach((to, from) => {
    // 在路由跳转后执行一些操作
    console.log(‘已跳转到’, to.path)
    })
    “`

    beforeEach 守卫接受三个参数：

    • to：即将要进入的目标路由对象。
    • from：当前导航正要离开的路由对象。

    • next：一个函数，用于控制路由跳转的行为。

      • 调用 next() 允许进入路由。
      • 调用 next(false) 取消路由跳转。
      • 调用 next('/login') 或 next({ path: '/login' }) 重定向到指定的路由。

  • 路由独享守卫：

    • beforeEnter：只在进入该路由时执行。

    javascript
    const routes = [
    {
    path: '/profile',
    component: Profile,
    beforeEnter: (to, from, next) => {
    // 检查用户是否拥有访问权限
    if (hasPermission()) {
    next() // 允许进入路由
    } else {
    next('/unauthorized') // 重定向到未授权页面
    }
    },
    },
    ]

    beforeEnter 守卫的参数与 beforeEach 守卫相同。

  • 组件内守卫：

    • beforeRouteEnter：在进入该组件对应的路由时执行。
    • beforeRouteUpdate：在当前组件对应的路由发生变化时执行（例如，动态路由参数变化）。
    • beforeRouteLeave：在离开该组件对应的路由时执行。

    vue
    <script>
    export default {
    beforeRouteEnter(to, from, next) {
    // 在进入该组件对应的路由时执行
    console.log('beforeRouteEnter')
    next()
    },
    beforeRouteUpdate(to, from, next) {
    // 在当前组件对应的路由发生变化时执行
    console.log('beforeRouteUpdate')
    next()
    },
    beforeRouteLeave(to, from, next) {
    // 在离开该组件对应的路由时执行
    console.log('beforeRouteLeave')
    const answer = window.confirm('确定要离开吗？')
    if (answer) {
    next()
    } else {
    next(false)
    }
    },
    }
    </script>

    组件内守卫的参数与 beforeEach 守卫相同。

总结

Vue Router 提供了一套强大的路由管理机制，可以帮助我们轻松构建 SPA 应用。 本文详细介绍了 Vue Router 的基本概念、安装配置、常用 API 以及实际应用，希望能够帮助你快速入门 Vue.js 路由。 掌握 Vue Router，你将能够构建出更复杂、更流畅、更用户友好的 Web 应用。记住多多练习，才能真正掌握这些知识点。

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部