Code前端首页关于Code前端联系我们

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

terry 7小时前 阅读数 13 #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.jsonyarn.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)
  }
}

为啥选yarn而不是npm装Vue Router?

可能有人问:“用npm装不行吗?为啥非得用yarn?” 不是说npm不好,而是yarn在这些场景下更顺手:

  • 版本锁定更稳:yarn.lock比package-lock.json更早出现,对版本的锁定逻辑更成熟,团队里每个人装的依赖版本完全一致,减少 bug。
  • 安装速度更快:yarn支持并行安装依赖,同时下载多个包,比npm串行安装快不少,尤其是项目依赖多的时候。
  • 离线缓存友好:装过的包会存在本地缓存,下次装同样的包不用联网,直接从缓存拿,省流量又快。
  • Monorepo支持好:如果项目是monorepo结构(比如用yarn workspace),yarn能更高效管理多个包之间的依赖,避免重复安装。

npm现在也做了很多优化,但如果项目里已经用yarn了,或者你想体验更稳定的依赖管理,选yarn准没错~

yarn安装Vue Router不难,但得注意版本匹配,配置时区分Vue2和Vue3的差异,碰到问题别慌,按照常见错误的解决方法排查,装好后再试试进阶功能,项目的路由管理就稳了~要是还有其他疑问,评论区随时聊~

版权声明

本文仅代表作者观点,不代表Code前端网立场。
本文系作者Code前端网发表,如需转载,请注明页面地址。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

热门