Vue中的路由细节

概念：

关键点在于不刷新界面通过URL变化展示不同组件

实现方式：

Hash模式：URL 中带有 #（如 http://example.com/#/home），# 后的内容作为路由标识，不会发送到服务器

History模式：使用 HTML5 的 history API（pushState/replaceState），URL 无 #（如 http://example.com/home），但需要服务器配置支持

工作原理：

Hash 模式：监听 hashchange 事件，捕获 # 后内容的变化

History 模式：监听 popstate 事件（处理浏览器前进 / 后退），通过 history.pushState 手动修改 URL

核心：

维护一个路由规则表（路由到组件的映射），当 URL 变化时，查找匹配的规则，根据匹配结果，在页面的占位符(如 < router-view >)中渲染对应的组件

现在完成一个简单配置

注意区分routes和router

javascript 复制代码

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/',        // 路径
    name: 'Home',     // 路由名称（可选）
    component: Home   // 对应组件
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(), // History 模式
  // history: createWebHashHistory(), // Hash 模式
  routes//对应上面的routes
  })

export default router

配置完成以后进行路由的跳转

模板中使用声明式跳转

javascript 复制代码

<!-- 普通跳转 -->
<router-link to="/">首页</router-link>
<router-link :to="{ name: 'About' }">关于页</router-link>

<!-- 带参数 -->
<router-link :to="{ path: '/user', query: { id: 1 } }">用户页</router-link>

JS中使用编程式跳转

javascript 复制代码

import { useRouter } from 'vue-router'
const router = useRouter()

// 基本跳转
router.push('/about')
router.push({ name: 'About' })

// 带参数
router.push({ path: '/user', params: { id: 1 } }) // params 需配合 name 使用
router.push({ path: '/user', query: { id: 1 } })  // query 会显示在 URL 上

// 替换当前历史记录（无回退）
router.replace('/about')

如果我们想要实现局部不刷新的替换

比如说导航栏固定内容区变化

这就是嵌套路由（子路由）

javascript 复制代码

// 配置
{
  path: '/dashboard',
  component: Dashboard,
  children: [
    { path: 'profile', component: Profile }, // 子路径：/dashboard/profile
    { path: 'settings', component: Settings } // 子路径：/dashboard/settings
  ]
}

模板中需在父组件添加 < router-view > 作为子组件的占位符

当我们需要控制路由跳转权限时需要用到路由守卫

全局守卫（影响所有路由）：

javascript 复制代码

// 跳转前触发
router.beforeEach((to, from, next) => {
  // to: 目标路由，from: 来源路由
  if (to.path === '/admin' && !isLogin) {
    next('/login') // 未登录则跳转到登录页
  } else {
    next() // 允许跳转
  }
})

组件内守卫（仅影响当前组件）：

javascript 复制代码

export default {
  beforeRouteEnter(to, from, next) {
    // 进入组件前调用（此时组件实例未创建）
  },
  beforeRouteLeave(to, from, next) {
    // 离开组件时调用（可用于确认弹窗）
    if (confirm('确定离开吗？')) {
      next()
    }
  }
}

6. 路由懒加载

优化首屏加载速度，按需加载组件：

javascript 复制代码

const routes = [
  {
    path: '/about',
    component: () => import('../views/About.vue') // 懒加载
  }
]

四、History 模式的服务器配置

History 模式下，直接刷新页面会向服务器请求该 URL，需服务器配置将所有请求转发到 index.html：

Nginx 配置 ：

nginx 复制代码

location / {
  try_files $uri $uri/ /index.html;
}

Apache 配置 ：
在 .htaccess 中添加：
apache 复制代码
```
FallbackResource /index.html
```

前端路由 vs 后端路由

类型	工作原理	场景
前端路由	客户端通过 JS 匹配 URL 并渲染组件	单页应用（SPA）
后端路由	服务器根据 URL 返回对应的 HTML 页面	多页应用（MPA）