一、先搞懂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) } }
为啥选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前端网发表,如需转载,请注明页面地址。
发表评论:
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。