当前位置：首页 > news >正文

下载和初步上手Vue3路由

news 2025/7/11 16:12:17

一、安装路由

bash

# 使用 npm 安装
npm install vue-router@4

# 或使用 yarn
yarn add vue-router@4

二、路由配置与暴露

1. 路由配置文件 `router/index.js`

javascript

import { createRouter, createWebHistory } from 'vue-router'

// 定义路由数组，每个对象代表一个路由配置
const routes = [
  {
    // 路由的路径，这里表示根路径
    path: '/',
    // 路由的名称，方便后续编程式导航使用
    name: 'Home',
    // 该路由对应的组件，使用懒加载的方式引入，提高应用加载性能
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue')
  },
  {
    // 动态路由，:id 是一个参数占位符
    path: '/user/:id',
    name: 'User',
    component: () => import('@/views/User.vue')
  },
  {
    path: '/dashboard',
    // 该路由对应的组件
    component: () => import('@/layouts/DashboardLayout.vue'),
    // 嵌套路由，子路由的路径是相对于父路由的
    children: [
      { path: '', name: 'DashboardHome', component: () => import('@/views/DashboardHome.vue') },
      { path: 'settings', name: 'DashboardSettings', component: () => import('@/views/DashboardSettings.vue') }
    ]
  },
  {
    // 匹配所有未定义的路由，用于显示 404 页面
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('@/views/NotFound.vue')
  }
]

// 创建路由实例
const router = createRouter({
  // 使用 HTML5 History 模式，去掉了 URL 中的 # 符号
  history: createWebHistory(),
  // 传入路由配置数组
  routes
})

// 暴露路由实例，以便在其他地方使用
export default router

路由配置文件 router/index.js 是整个路由系统的核心。routes 数组中每个对象代表一个路由配置，包含路径、名称和对应的组件。对于嵌套路由，通过 children 属性来配置子路由。createRouter 函数用于创建路由实例，history 选项指定了路由的历史模式，这里使用的是 HTML5 History 模式。最后通过 export default router 将路由实例暴露出去，方便在其他文件中引入使用。

2. 在 `main.js` 中引入并使用路由

javascript

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

// 创建 Vue 应用实例
createApp(App)
  // 将路由实例挂载到 Vue 应用上
  .use(router)
  // 将应用挂载到 DOM 节点上
  .mount('#app')

在 main.js 中，我们引入了路由实例并通过 use(router) 方法将其挂载到 Vue 应用上。这样，整个应用就可以使用路由功能了。最后，使用 mount('#app') 将应用挂载到指定的 DOM 节点上。

三、基础用法演示

1. 在组件中使用路由导航

vue

<!-- App.vue -->
<template>
  <nav>
    <!-- router-link 组件用于生成路由链接，to 属性指定要跳转的路由路径 -->
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <!-- router-view 是路由出口，用于显示当前匹配的路由组件 -->
  <router-view/>
</template>

在 App.vue 组件中，我们使用 <router-link> 组件来生成路由链接，用户点击链接时会跳转到指定的路由。<router-view> 则是路由出口，它会根据当前的路由匹配情况显示对应的组件。

2. 动态路由获取参数

vue

<!-- User.vue -->
<template>
  <h1>用户详情页</h1>
  <!-- 通过 $route.params 来获取动态路由中的参数 -->
  <p>用户ID：{{ $route.params.id }}</p>
</template>

<script>
export default {
  computed: {
    userId() {
      return this.$route.params.id
    }
  }
}
</script>

在动态路由中，路径中的 :id 是一个参数占位符。在 User.vue 组件中，我们可以通过 $route.params 来获取这些参数。这里使用计算属性 userId 来获取用户 ID，方便在模板中使用。

3. 编程式导航

javascript

// 在组件中使用
// 跳转到指定路由，会向 history 栈添加记录
this.$router.push('/about')
// 替换当前路由，不会保留历史记录
this.$router.replace('/login')
// 回退上一页
this.$router.go(-1)

$router 是路由实例，push 方法用于导航到新路由，它会向浏览器的历史记录栈中添加一条新记录。replace 方法用于替换当前路由，不会保留历史记录。go 方法用于在历史记录中前进或后退，传入负数表示后退，正数表示前进。

四、哈希注入与相关操作

1. 在路由中使用哈希

javascript

// 编程式导航时添加哈希
this.$router.push({ path: '/about', hash: '#section1' })

// 路由配置中监听哈希变化
router.beforeEach((to, from, next) => {
  // 判断目标路由是否包含哈希值
  if (to.hash) {
    console.log('当前路由的哈希值：', to.hash)
  }
  // 继续路由跳转
  next()
})

在编程式导航时，可以通过对象形式传递 hash 属性来添加哈希值。在路由守卫中，我们可以通过 to.hash 获取目标路由的哈希值，并进行相应的处理。next() 方法用于继续路由跳转。

2. 监听哈希变化

javascript

window.addEventListener('hashchange', () => {
  const currentHash = window.location.hash
  console.log('哈希值发生变化：', currentHash)
})

通过 window.addEventListener('hashchange') 可以监听浏览器地址栏中哈希值的变化。当哈希值发生变化时，会触发回调函数，我们可以在回调函数中获取当前的哈希值并进行相应的操作。

五、高级功能

1. 路由守卫

javascript

// 全局前置守卫，会在每次路由切换前执行
router.beforeEach((to, from, next) => {
  // 判断目标路由是否需要认证，并且用户是否已认证
  if (to.meta.requiresAuth && !isAuthenticated()) {
    // 如果未认证，跳转到登录页面
    next('/login')
  } else {
    // 继续路由跳转
    next()
  }
})

// 路由独享守卫，只作用于当前路由
const routes = [
  {
    path: '/dashboard',
    component: DashboardLayout,
    beforeEnter: (to, from, next) => {
      // 判断用户是否有访问权限
      if (hasPermission()) {
        // 有权限，继续路由跳转
        next()
      } else {
        // 没有权限，跳转到未授权页面
        next('/unauthorized')
      }
    },
    children: [
      // ...
    ]
  }
]

// 组件内守卫
export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this`，因为当守卫执行前，组件实例还没被创建
    next(vm => {
      // 通过 `vm` 访问组件实例
    })
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 在导航离开渲染该组件的对应路由时调用
    // 可以访问组件实例 `this`
    const answer = window.confirm('确定要离开吗？')
    if (answer) {
      // 用户确认离开，继续路由跳转
      next()
    } else {
      // 用户取消离开，阻止路由跳转
      next(false)
    }
  }
}

路由守卫用于在路由切换的不同阶段执行特定的逻辑。全局前置守卫 beforeEach 会在每次路由切换前执行，可用于全局的权限验证等操作。路由独享守卫 beforeEnter 只作用于当前路由，用于该路由的特定权限验证。组件内守卫用于在组件内部处理路由相关的逻辑，如在进入、更新、离开组件时执行特定操作。

2. 路由元信息

javascript

const routes = [
  {
    path: '/admin',
    name: 'Admin',
    component: () => import('@/views/Admin.vue'),
    // 路由元信息，用于存储额外的信息
    meta: {
      requiresAuth: true,
      roles: ['admin']
    }
  }
]

router.beforeEach((to, from, next) => {
  // 判断目标路由是否需要认证，并且用户是否已认证
  if (to.meta.requiresAuth && !isAuthenticated()) {
    // 如果未认证，跳转到登录页面
    next('/login')
  } else if (to.meta.roles && !hasRole(to.meta.roles)) {
    // 判断用户是否有相应的角色权限
    next('/unauthorized')
  } else {
    // 继续路由跳转
    next()
  }
})

在路由配置中可以通过 meta 属性添加元信息，如权限要求、角色要求等。在路由守卫中可以根据这些元信息进行相应的验证，确保用户有足够的权限访问目标路由。

六、常用特性说明

特性	说明
`<router-view>`	路由出口，显示匹配组件
`<router-link>`	生成路由链接，默认渲染为 `<a>` 标签
`router.push`	导航到新路由，会向 history 栈添加记录
`router.replace`	替换当前路由，不会保留历史记录
`router.go`	在历史记录中前进或后退
`$route`	当前路由信息对象（包含 path、params、query、hash 等）
`$router`	路由实例，用于编程式导航和路由守卫等操作