項(xiàng)目場(chǎng)景：

在vue2中安裝vue-router

問題描述：

提示：在安裝過程中報(bào)錯(cuò)，缺少依賴：

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版本問題，新版本對(duì)下載要求比較嚴(yán)格。

解決方案：

根據(jù)錯(cuò)誤提示，在命令行中加入–legacy-peer-deps，由于vue與vue-router版本兼容的問題，需要在安裝語(yǔ)句后加入需要下載vue-router版本，不然會(huì)下載最新的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>可以制作導(dǎo)航，可以鏈接到其他頁(yè)面。

 <router-link to="/">[顯示字段]</router-link>

to后面接的是導(dǎo)航的路徑

[顯示字段] ：就是導(dǎo)航名稱，比如首頁(yè)。

在App.vue頁(yè)面添加導(dǎo)航鏈接，實(shí)現(xiàn)導(dǎo)航

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
        導(dǎo)航
        <p>
            <router-link to="/demo">跳轉(zhuǎn)到demo頁(yè)面</router-link>
        </p>
        <p>
            <router-link to="/">跳轉(zhuǎn)到首頁(yè)面</router-link>
        </p>
    </div>
    <router-view/>
  </div>
</template>

這樣就實(shí)現(xiàn)了用<router-link>標(biāo)簽設(shè)置導(dǎo)航，點(diǎn)擊就可以實(shí)現(xiàn)頁(yè)面內(nèi)容的變化。

總結(jié)

到此這篇關(guān)于vue2安裝vue-router報(bào)錯(cuò)的文章就介紹到這了,更多相關(guān)vue2安裝vue-router報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論