一、先搞懂yarn和Vue Router是干啥的

terry 10小时前阅读数 14 #Vue

文章标签 yarn；Vue Router

不少刚接触Vue项目的同学，都会疑惑“yarn install vue router怎么操作？”，毕竟Vue Router是单页面应用（SPA）里管理页面跳转的核心工具，而yarn又是前端开发中常用的包管理器，把这俩结合好才能让项目跑起来，这篇文章从基础到进阶，把安装、配置、排坑这些事儿讲明白,哪怕是新手也能跟着一步步做～

得先明白工具是干啥的，操作起来才不慌。

yarn是啥？ 它是个JavaScript包管理器，和npm功能差不多，但在依赖管理、安装速度上更有优势，比如它有离线缓存，装过的包下次不用再从网上下；还有yarn.lock文件能把依赖版本锁死，团队协作时大家装的包版本完全一致，避免“我电脑上能跑，你电脑上报错”的尴尬。

Vue Router是干啥的？ 简单说，它是Vue.js官方的路由管理器，在Vue项目里，页面跳转、嵌套页面、参数传递这些需求，全靠它实现，比如做个后台管理系统，点击左侧菜单切换不同页面，没有Vue Router根本搞不定单页面应用的“伪跳转”逻辑。

yarn安装Vue Router的核心步骤

安装前先确认项目里用的Vue版本！因为Vue Router的版本和Vue版本强绑定，装错了准出问题：

如果项目用的是Vue2，得装 vue-router@3.x 版本；
如果项目用的是Vue3，得装 vue-router@4.x 版本；

步骤1：打开项目终端

先进入你的Vue项目根目录（就是有package.json的那个文件夹），打开命令行终端，比如用VSCode的话，直接在项目文件夹里右键选“在集成终端中打开”。

步骤2：执行安装命令

根据Vue版本输入对应的yarn命令：

Vue2项目：yarn add vue-router@3（这里写@3会自动装3.x的最新版）
Vue3项目：yarn add vue-router@4（同理，装4.x最新版）

执行命令后，yarn会自动处理依赖，把Vue Router下载到node_modules里，同时更新package.json和yarn.lock。

步骤3：验证是否安装成功

打开项目里的package.json文件，看dependencies里有没有"vue-router": "^3.x.x"（Vue2）或者"vue-router": "^4.x.x"（Vue3），有了就说明装对了～

安装后怎么快速配置Vue Router？

装完只是第一步，得配置好才能用，Vue2和Vue3的配置方式不一样，分开讲：

Vue2项目配置示例

在项目里新建一个router文件夹，里面建个index.js文件，写这样的代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入你的页面组件，比如Home和About
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
// 注册VueRouter插件
Vue.use(VueRouter)
// 定义路由规则
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]
// 创建路由实例
const router = new VueRouter({
  mode: 'history', // 选history模式，去掉url里的#
  routes
})
export default router

然后在main.js里引入并挂载：

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 引入上面写的路由配置
new Vue({
  router, // 把路由实例注入Vue根实例
  render: h => h(App)
}).$mount('#app')

Vue3项目配置示例

Vue3的API有变化，配置方式更简洁，同样新建router/index.js：

import { createRouter, createWebHistory } from 'vue-router'
// 引入页面组件
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
// 定义路由规则（和Vue2结构差不多）
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]
// 创建路由实例，用createRouter和createWebHistory
const router = createRouter({
  history: createWebHistory(), // 对应Vue2的mode: 'history'
  routes
})
export default router

然后在main.js里注入：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router) // 挂载路由
app.mount('#app')

配置完后，在App.vue里用<router-view>显示页面，<router-link>做跳转，

<template>
  <div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于我们</router-link>
    <router-view></router-view> <!-- 这里显示匹配的页面组件 -->
  </div>
</template>

安装时碰到问题咋解决？

装包过程中遇到报错很正常，常见问题和解决方法总结这几个：

问题1：版本不兼容，比如Vue2装了vue-router@4

症状：终端报错“Vue.use is not a function”或者“export 'createRouter' was not found in 'vue-router'”，原因就是版本对不上！
解决：先卸载错的版本，再装对应版本，命令：yarn remove vue-router，然后重新装yarn add vue-router@3（Vue2）或者@4（Vue3）。

问题2：网络差导致安装失败

症状：终端一直卡着，或者报错“request timed out”，这时候得换npm源或者用淘宝源。
解决：执行yarn config set registry https://registry.npm.taobao.org，把下载源换成国内镜像，再重新执行安装命令。

问题3：依赖重复，yarn提示“has unmet peer dependency”

症状：安装时警告里有“unmet peer dependency”，说明某些依赖版本冲突了。
解决：先用yarn why 包名看看哪个包依赖它，再手动调整版本，或者执行yarn dedupe让yarn自动去重依赖。

问题4：yarn.lock文件冲突（团队协作时常见）

症状：拉取代码后安装依赖报错，或者git提示yarn.lock冲突。
解决：先把本地yarn.lock删掉，重新执行yarn install生成新的lock文件，再提交，这样能保证依赖版本和团队一致。

装好之后，这些进阶玩法值得试试

装完能用只是基础，想让项目更专业，这些功能得安排上：

路由懒加载：让页面加载更快

如果项目页面多，全在一开始加载会很慢，用懒加载的话，访问哪个页面才加载对应的组件代码，配置方式很简单，把组件引入改成动态导入：

// 原来的静态引入：import Home from '@/views/Home.vue'
// 改成懒加载：
const Home = () => import('@/views/Home.vue')
const About = () => import('@/views/About.vue')
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

嵌套路由：实现页面嵌套结构

比如后台管理系统，布局里有侧边栏和内容区，内容区还要根据菜单切换，这时候用嵌套路由：

const Layout = () => import('@/views/Layout.vue')
const Dashboard = () => import('@/views/Dashboard.vue')
const Settings = () => import('@/views/Settings.vue')
const routes = [
  {
    path: '/admin',
    component: Layout, // 父组件，里面得有<router-view>
    children: [
      { path: 'dashboard', component: Dashboard }, // 访问/admin/dashboard时显示
      { path: 'settings', component: Settings }    // 访问/admin/settings时显示
    ]
  }
]

路由守卫：控制页面权限

比如某些页面需要登录才能进，用全局守卫或者组件内守卫判断，以全局前置守卫为例（Vue3写法）：

const router = createRouter({ ... })
router.beforeEach((to, from, next) => {
  // 判断用户是否登录（假设用isLogin变量）
  if (to.path === '/profile' && !isLogin) {
    next('/login') // 没登录就跳登录页
  } else {
    next() // 放行
  }
})

动态路由：传递参数

比如商品详情页，每个商品ID不同，用动态路由传参：

const Product = () => import('@/views/Product.vue')
const routes = [
  { path: '/product/:id', component: Product } // :id是动态参数
]

在Product组件里，用useRoute（Vue3）或者this.$route（Vue2）取参数：

// Vue3
import { useRoute } from 'vue-router'
export default {
  setup() {
    const route = useRoute()
    console.log(route.params.id) // 拿到动态参数id
  }
}
// Vue2
export default {
  mounted() {
    console.log(this.$route.params.id)
  }
}