vue2安装vue-router报错的解决方法

目录
  • 项目场景:
  • 问题描述:
  • 原因分析:
  • 解决方案:
  • 附加:
  • 总结

项目场景:

在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报错内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-03-13

Vue学习笔记进阶篇之vue-router安装及使用方法

介绍 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文是基于上一篇文章(Vue学习笔记进阶篇--vue-cli安装及介绍)vue-cli脚手架工具的. 安装 在终端通过cd命令进入到上一篇文章中创建的my-demo1项目目录里

vue-Router安装过程及原理详细

目录 1.前端路由实现原理 2.vue-Router 基本使用 2.1.安装 2.2.配置路由 2.3.实例化 2.4.挂载路由 2.5.页面上添加 router-link 和 router-view 3.router 的模式 3.1.hash 模式 3.2.history 模式 4.router-link的属性 4.1.tag 属性 4.2.replace 属性 4.3.active-class 5.vue-Rrouter 页面跳转方式 5.1.router-link 实现 5.2.通过 js

详解Vue-Router的安装与使用

目录 安装 路由的基础配置 将Router安装到Vue中 Router的相关配置 Router.routes 的相关配置 实现一个简单的路由 1.配置路由 2. 在组件中实现路由 1. router-link 用于实现路由的跳转组件:该组件支持的属性 2. router-view 根据当前VueRouter的配置,当路由路由路径发生改变时渲染对应的路由视图组件 安装 1.在已有Vue项目中手动安装vue-router npm install --save vue-router 2.使用vue-c

详解VUE项目中安装和使用vant组件

Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件. 特性 50+ 个经过有赞线上业务检验的组件 单元测试覆盖率超过 90% 完善的中英文文档和示例 支持babel-plugin-import 支持 TypeScript 支持 SSR 组件中文文档地址:https://youzan.github.io/vant/#/zh-CN/intro 1.创建VUE项目之后进入项目目录运行安装命令: npm i vant -S 2.安装 babel-pl

详解Vue 全局引入bass.scss 处理方案

为解决在Vue组件中全局引入 scss 变量及 mixins ,装载了一个名为 "sass-resources-loader" 解析器. 安装 $ > cnpm i -D sass-resources-loader 配置 配置的话是在 vue 的 loader 解析器中配置,即在 vue-cli 脚手架方式构建出来的文件中是以 build/utils.js,在该文件中定义了 cssLoaders() 方法,该方法定义了诸如 css.less的解析方式,具体如下. // build

详解vue项目打包后通过百度的BAE发布到网上的流程

经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE. 继续编辑终于将自己写的JSON文件模拟的数据也传上去了. 具体的步骤: 1,首先讲写好的vue项目打包(具体的打包过程我就不在说了,直接npm run build,就会在VUE项目文件中重新创建一个dist文件,这个就是打包好的项目) 2,在百度的应用引擎BAE部署一个项目,一天才2毛钱很便宜.自己

详解Vue项目引入CreateJS的方法(亲测可用)

1 前 言 1.1 CreateJS介绍 CreateJS是基于HTML5开发的一套模块化的库和工具. 基于这些库,可以非常快捷地开发出基于HTML5的游戏.动画和交互应用. A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5. 包含4类工具库 EaselJS

详解vue 路由跳转四种方式 (带参数)

1.  router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para

详解vue beforeEach 死循环问题解决方法

什么是beforeEach? beforeEach 是一个vue-router的路由导航钩子,一般我用它做路由守卫. 什么是路由守卫? 路由跳转前做一些验证,比如登录验证,是网站中的普遍需求.对此,vue-route 提供的beforeRouteUpdate可以方便地实现导航守卫(navigation-guards).导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧.** 文档地址:https://router.vuejs.org/

详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结

如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 1. Vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的. 场景: var vm = new Vue({ data:{}, // 页面不会变化 template: '<div>{{message}

详解vue高级特性

Vue为我们提供了很多高级特性,学习和掌握它们有助于提高你的代码水平. 一.watch进阶 从我们刚开始学习Vue的时候,对于侦听属性,都是简单地如下面一般使用: watch:{ a(){ //doSomething } } 实际上,Vue对watch提供了很多进阶用法. handler函数 以对象和handler函数的方式来定义一个监听属性,handler就是处理监听变动时的函数: watch:{ a:{ handler:'doSomething' } }, methods:{ doSomet

详解vue路由

前端路由和后端路由: 后端路由:对于普通的网站,所有的超链接都是url地址,所有url都对应服务器上对应的资源 前端路由:对于单页面应用程序来说,主要通过url的hash(#)来实现不同页面的切换,同时hash还有一个特点HTTP请求中不会包含hash相关的内容,所以单页面程序中的页面跳转主要用hash实现 在单页面应用程序中这种通过hash来改变页面的方式称作前端路由区别于后端路由 路由的使用 1.创建一个路由对象,当导入vue-router包之后,在window全局对象中就有一个路由的构造函

详解Vue中Axios封装API接口的思路及方法

一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等. 在一个项目中我们如果要使用很多接口的话,总不能在每个页面都写满了.get()或者.post()吧?所以我们就要自己手动封装一个全局的Axios网络模块,这样的话就既方便也会使代码量不那么冗余. 安装 > npm install axios //这个