项目场景：
在vue2中安装vue-router
问题描述：
提示：在安装过程中报错，缺少依赖：
PS D:\WebDeplpyer\workspace\Vue_Basic\vue_test> npm i vue-router
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: vue_test@0.1.0
npm ERR! Found: vue@2.6.14
npm ERR! node_modules/vue
npm ERR! vue@"^2.6.11" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.0.0" from vue-router@4.0.12
npm ERR! node_modules/vue-router
npm ERR! vue-router@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\ASUS\AppData\Local\npm-cache\eresolve-report.txt for a full report.npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ASUS\AppData\Local\npm-cache\_logs\2022-02-16T06_43_35_320Z-debug.log
原因分析：
查阅资料，大部分都说是npm版本问题，新版本对下载要求比较严格。
解决方案：
根据错误提示，在命令行中加入–legacy-peer-deps，由于vue与vue-router版本兼容的问题，需要在安装语句后加入需要下载vue-router版本，不然会下载最新的vue-router版本。
npm install --legacy-peer-deps vue-router@3.5.2
在package.json文件中查看是否下载成功
"dependencies": {
"animate.css": "^4.1.1",
"axios": "^0.25.0",
"chromedriver": "^98.0.0",
"core-js": "^3.6.5",
"nanoid": "^3.2.0",
"pubsub-js": "^1.9.4",
"vue": "^2.6.11",
"vue-resource": "^1.5.3",
"vue-router": "^3.5.2",
"vuex": "^3.6.2"
},
附加：
利用<router-link>可以制作导航，可以链接到其他页面。
<router-link to="/">[显示字段]</router-link>
to后面接的是导航的路径
[显示字段] ：就是导航名称，比如首页。
在App.vue页面添加导航链接，实现导航
<template>
<div id="app">
<img src="./assets/logo.png">
<div>
导航
<p>
<router-link to="/demo">跳转到demo页面</router-link>
</p>
<p>
<router-link to="/">跳转到首页面</router-link>
</p>
</div>
<router-view/>
</div>
</template>
这样就实现了用<router-link>标签设置导航，点击就可以实现页面内容的变化。
总结
到此这篇关于vue2安装vue-router报错的文章就介绍到这了,更多相关vue2安装vue-router报错内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！