懂了这个,前端搭建0-1的项目就没有任何问题

一、Vue Router基础概念

Vue Router主要用于管理单页应用中不同视图(组件)之间的切换,它通过URL的变化来映射不同的组件。核心概念包括:

  1. 路由(Route) ‌:定义URL路径与组件的映射关系
  2. 路由器(Router) ‌:管理所有路由规则的实例
  3. 路由视图(RouterView) ‌:显示当前路由匹配的组件
  4. 路由链接(RouterLink) ‌:用于导航的特殊组件

二、安装与基本配置

1. 安装Vue Router

首先需要通过npm安装vue-router插件2:

bash 复制代码
npm install vue-router

2. 创建路由实例

在项目中创建router.js文件,配置基本路由3:

javascript 复制代码
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

export default router

3. 在main.js中引入路由

javascript 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

三、路由模式

Vue Router支持两种路由模式:

  1. History模式 ‌:使用createWebHistory()创建,URL更简洁(如/about)

    • 需要服务器配置支持,否则刷新页面会404
    • 适合生产环境使用
  2. Hash模式 ‌:使用createWebHashHistory()创建,URL带#(如/#/about)

    • 不需要服务器额外配置
    • 适合开发环境或简单项目
javascript 复制代码
javascriptCopy Code
// 切换为Hash模式
import { createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [...]
})

四、路由导航

1. 声明式导航

使用<router-link>组件创建导航链接:

javascript 复制代码
<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>

2. 编程式导航

在组件方法中使用router实例导航:

javascript 复制代码
// 跳转到指定路径
this.$router.push('/about')

// 替换当前路由(不保留历史记录)
this.$router.replace('/about')

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

五、路由传参

1. 路径参数

定义动态路由:

javascript 复制代码
{
  path: '/user/:id',
  component: User
}

获取参数:

javascript 复制代码
this.$route.params.id

2. 查询参数

通过URL查询字符串传参:

javascript 复制代码
this.$router.push('/user?name=John')

获取参数:

javascript 复制代码
this.$route.query.name

3. Props传参

可以将路由参数作为props传递给组件:

javascript 复制代码
{
  path: '/user/:id',
  component: User,
  props: true
}

六、嵌套路由

嵌套路由允许在组件内部再嵌套其他路由视图:

javascript 复制代码
{
  path: '/user/:id',
  component: User,
  children: [
    { path: 'profile', component: Profile },
    { path: 'posts', component: Posts }
  ]
}

在User组件中添加<router-view>

javascript 复制代码
<div>
  <h2>用户信息</h2>
  <router-view></router-view>
</div>

七、导航守卫

导航守卫用于控制路由跳转:

1. 全局前置守卫

javascript 复制代码
router.beforeEach((to, from, next) => {
  // 验证登录状态等
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

2. 路由独享守卫

javascript 复制代码
{
  path: '/admin',
  component: Admin,
  beforeEnter: (to, from, next) => {
    // 验证管理员权限
  }
}

3. 组件内守卫

javascript 复制代码
export default {
  beforeRouteEnter(to, from, next) {
    // 组件渲染前调用
  },
  beforeRouteUpdate(to, from, next) {
    // 当前路由改变但组件复用时调用
  },
  beforeRouteLeave(to, from, next) {
    // 离开该组件时调用
  }
}

八、路由懒加载

使用动态导入实现路由懒加载,优化应用性能:

javascript 复制代码
{
  path: '/about',
  component: () => import('./views/About.vue')
}

九、路由元信息

可以为路由定义元数据,用于权限控制等场景:

javascript 复制代码
{
  path: '/admin',
  component: Admin,
  meta: { requiresAuth: true }
}

十、常见问题解决方案

  1. 刷新404问题‌:History模式需要服务器配置,将所有请求重定向到index.html
  2. 路由重复跳转警告‌:在push/replace时捕获异常
  3. 滚动行为控制‌:可以配置scrollBehavior选项
  4. 动态添加路由‌:使用router.addRoute()方法
相关推荐
quan26312 小时前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
qb3 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构
虫无涯3 小时前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
NewChapter °3 小时前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app
练习时长两年半的Java练习生(升级中)3 小时前
从0开始学习Java+AI知识点总结-30.前端web开发(JS+Vue+Ajax)
前端·javascript·vue.js·学习·web
小高0075 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
EveryPossible5 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua6 小时前
setup函数相关【3】
前端·javascript·vue.js
neon12046 小时前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画
李长鸿9 小时前
vue3中的插槽和其他
vue.js