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

下载和初步上手Vue3路由

一、安装路由

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路由实例,用于编程式导航和路由守卫等操作
七、注意事项
  1. Vue3 需要搭配 Vue Router 4.x 版本。
  2. history 模式需要后端支持,因为在刷新页面时,服务器需要正确处理这些请求。
  3. 路由懒加载使用 () => import('...') 语法,提高应用的加载性能。
  4. 动态路由建议使用 props: true 传递参数,使组件更易于测试和复用。
http://www.dtcms.com/a/98512.html

相关文章:

  • NOIP2007提高组.矩阵取数游戏
  • 思维链技术(Chain-of-Thought, CoT)
  • 双卡 RTX 5090 深度体验:AI 推理框架选择与性能限制实测
  • HCIP(RSTP+MSTP)
  • 【STL】list
  • React程序打包与部署
  • JAVASE-day14
  • 蓝桥杯备考:多米诺骨牌
  • 【Linux】GDB调试指南
  • 基于YALMIP+CPLEX的带储能微电网调度问题最优求解matlab仿真
  • 提示词工程(Prompt Engineering):释放AI潜能的“语言编程”
  • #CX# UVM中的virtual sequence 和 virtual sequencer 的用途
  • 【Kafka】从理论到实践的深度解析
  • pytorch中dataloader自定义数据集
  • Java/Scala是什么
  • 解决由于中文路径无法安装软件的问题--例如postersql
  • 数据化管理(一)---什么是数据化管理
  • 模拟集成电路设计与仿真 : Memory
  • 北斗导航 | 中国北斗卫星导航系统的发展历程——“三步走”战略:背景,信号频点,调制方式,短报文,等
  • Linux交叉编译第三方库,C语言调用第三方库
  • 资产收益数据处理与分析
  • RK3568 GPIO子系统
  • 自然语言模型的演变与未来趋势:从规则到多模态智能的跨越
  • 混合知识表示系统框架python示例
  • PyQt6实例_批量下载pdf工具_主线程停止线程池
  • PERL开发环境搭建>>Windows,Linux,Mac OS
  • 【JavaScript】九、JS基础练习
  • torch.tensor 用法
  • OpenAI API - 快速入门开发
  • 链表(C++)