一、安装路由
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.hashconsole.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 | 路由实例，用于编程式导航和路由守卫等操作 |
七、注意事项
- Vue3 需要搭配 Vue Router 4.x 版本。
- history 模式需要后端支持，因为在刷新页面时，服务器需要正确处理这些请求。
- 路由懒加载使用
() => import('...')语法，提高应用的加载性能。 - 动态路由建议使用
props: true传递参数，使组件更易于测试和复用。
_今日的最新消息_长沙官网seo收费标准)
