学习vue-router遇到问题

最新推荐文章于 2023-06-06 16:31:26 发布
最新推荐文章于 2023-06-06 16:31:26 发布
阅读量311 收藏
点赞数
分类专栏： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xuexixuexien/article/details/107520900
版权
本文深入探讨使用Vue-router过程中常见的两个错误：一是实例中的router属性误写为routers；二是在index文件中new router对象后，属性名误写为route而非routes。这两个问题源于代码编写时对固定语法规则的误解。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用vue-cli 2.0版本创建的项目，
一。
已经配置好vue-router，在浏览器中测试时却一直报错：
在这里插入图片描述
尝试了无数种办法后，仍无解，最后才发现原来是在入口文件main.js中的vue实例中的router属性写错了，写成了routers。

二。
已经配置好了router的映射，但在浏览器中点击标签不起作用，找了很久才发现是在index文件中，new router对象后，在其中的属性写成了route,正确写法是rotues.

上边两个问题是一样的，代码中有一些固定语法规则在编写时是确定的。

vue router引入路由与路由配置容易犯错的地方与常见的报错与处理报错
weixin_30940783的博客
07-17 2661
首先npm安装vue-router插件，就不说了其次： 先看下我本地的目录结构吧 第一步：在src目录下新建一个专门存放router的index.js文件里面的内容为： import Vue from 'vue' //注：这句必须要有，虽然在main.js里面已经引入过Vue，但是这里不要这句的话，就直接报错了Vue is not defined import VueRouter ...
学习vue-router遇到的若干问题
qq_32801583的博客
05-12 407
1.学习vue-router过程中，在route/index.js添加一条路由时候，报错，如下，原因是未安装sass-loader和node-sass，解决方法： npm install sass-loader -D npm install node-sass -D 安装完之后重启项目，又出现如下图这个问题 原因为sass-loader版本过高，解决方式为：在package.json文件中，将sass-loader版本更改为7.0.0如下 重新启动之后，问题解决，能正常访问新添加的..
Vue路由vue-router常见问题
weixin_54937289的博客
11-08 540
vue-route常见问题
vue-router报错
qq_45142260的博客
02-17 2787
vue路由报错，vue-router 报错内容：Catch all routes ("*") must now be defined using a param with a custom regexp.
【vue】Vue-Router报错：Uncaught (in promise)Error: Navigation cancelled from “/“ to “/1“ with a new navig
SunPeng的博客
04-13 2343
【vue】Vue-Router报错：Uncaught (in promise)Error: Navigation cancelled from “/“ to “/1“ with a new navig
Vue-Router报错：Uncaught (in promise)Error: Navigation cancelled from “/“ to “/1“ with a new navigation
weixin_45092437的博客
07-25 4110
该错误是因为vue-router的内部没有对编程式导航进行catch处理，所以在使用`this.$router.push()` 和 `this.$router.replace` 进行路由跳转时，往同一地址跳转时或者在跳转的 mounted/activated 等函数中再次向其他地址跳转时会出现报错。但是在3.1.0版本及更高版本中，页面在跳转路由控制台会报Uncaught (in promise)的问题，push和replace方法会返回一个promise, 你可能在控制台看到未捕获的异常。......
基于vue-router 多级路由redirect 重定向的问题
10-18
本文将详细介绍在使用 vue-router 实现多级路由的重定向时可能会遇到的问题以及解决方案。 首先，让我们了解一些基础知识。在 vue-router 中，重定向是将指定路由映射到另一个路径的过程。重定向可以是动态的，也...
vue-router之解决addRoutes使用遇到的坑
11-20
最近项目中使用了vue-router的addRoutes这个api，遇到了一个小坑，记录总结一下。 场景复现： 做前端开发的同学，大多都遇到过这种需求：页面菜单根据用户权限动态生成，一个常见的解决方案是： 前端初始化的时候，...
vue-router 中router-view不能渲染的解决方法
08-30
例如，在创建 VueRouter 实例时，需要使用 const router = new VueRouter({ routes: routes });，而不是 const router = new VueRouter({ routers: routers });。 此外，开发者还需要确保在 components 中正确地...
vue-router3.0版本中 router.push 不能刷新页面的问题
11-30
然而，在Vue-Router 3.0版本中，开发者可能会遇到一个常见问题：使用`router.push`进行页面跳转时，URL会改变，但页面内容不会自动更新，除非手动刷新页面。这个问题在GitHub上也有相关的讨论，特别是在3.0.1版本中...
解决vue-router进行build无法正常显示路由页面的问题
08-27
const router = new VueRouter({ mode: 'hash', base: __dirname, routes: [ { path: '/first', component: firstCom } ] }) ``` 五、注意事项 在使用Vue-Router时，开发者需要注意的是，在进行Build时，需要...
今日小坑：Vue-Router之路径routes拼写错误
alexis7的博客
07-23 498
今天在学习Vue-Router，在写routes路径的时候不小心拼写错误，将routes错拼成了routers，代码如下： 错误的拼写： routers:[ {path:"/",component: index}, {path:"/find",component:find}, {path:"/friend",component:friend} ] 正确的拼写： routes:[
vue-router资源请求路径错误
qq_40822000的博客
03-03 947
废话不多说，直接上bug 一看就是资源路径错误，请求路径中是相对路径。 解决： 在vue-config.js里面修改publicPath就行： module.exports = { publicPath: "/", // 基本路径 outputDir: "dist", // 输出文件目录 lintOnSave: false, // eslint-loader 是否在保存的时候检查 ...
vue，创建router中index.js的正确与错误代码
weixin_40945354的博客
06-22 609
我的错误代码 缺了前面的方法 const routes = [ { path: '/', component: Home } }, ] 参考做法：router官网 https://next.router.vuejs.org/guide/#javascript 正确的 const router = createRouter({ history: createWebHashHistory(), // hash模式：createWebHashHistory，history模式
【笔记】Vue router 解决跳转到当前路由报错问题
misschengispink的博客
12-21 722
解决方案： 在vue的路由文件里 我的是router.js(或者是router文件夹里的index.js) // 解决跳转到当前路由报错问题 // 底下这两句如果引入过就不用引入了 import Vue from 'vue' import VueRouter from 'vue-router' const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return
解决vue-router跳转，控制台报错
qq_56714977的博客
08-28 786
Uncaught (in promise) Error: Redirected when going from "/category" to "/cart" via a navigation guard.
vue-router跳转时报错——亲测有用
u013486889的博客
11-24 1050
Navigation cancelled from "/" to "/home" with a new navigation. 如果vue-router是3.0以上，请卸载此版本，更换为 vue-router2.8.0版本，此方法是最方便，最简单暴力的解决方式 npm uninstall vue-router npm install vue-router@2.8.0 -S ...
解决vue router中连续点击跳转报错的问题
HHYZBC的博客
08-25 633
其原因是在连续点击跳转连接后，其返回的是一个promise对象，该对象并没有成功和失败的回调所导致的。解决问题是在router文件夹中重写push和replace方法即可。
vue-router报错：TypeError: The “id“ argument must be of type string. Received an instance of Array
qq_39480297的博客
06-06 844
vue2引用vue-router3时报错：TypeError: The “id” argument must be of type string. Received an instance of Array。报错原因，居然是router.js中，引入组件使用了懒加载。
vue cli 安装vue-router
最新发布
03-22
<think>嗯，用户想知道如何通过Vue CLI在Vue.js项目中安装vue-router。首先，我需要回顾一下Vue CLI的基本用法和vue-router的安装步骤。Vue CLI是Vue.js的官方脚手架工具，可以帮助快速搭建项目结构。安装vue-router通常有两种方式：在创建项目时直接选择包含vue-router的选项，或者在已有项目中手动安装。 根据引用内容，用户可能在安装过程中遇到了版本兼容性问题。引用[2]和[3]提到使用特定版本的vue-router，比如3.5.2，并通过npm或cnpm安装，可能需要添加--legacy-peer-deps参数来解决依赖冲突。这说明在安装时需要注意Vue.js和vue-router的版本兼容性，尤其是Vue 2.x和Vue Router 3.x的对应关系，以及Vue 3.x和Vue Router 4.x的匹配。 接下来，我需要分步骤说明两种安装方法。第一种是在项目创建时选择vue-router，这样Vue CLI会自动配置路由相关文件。第二种是在已有项目中手动安装，这时需要运行npm install命令，并指定合适的版本号，然后手动配置路由。需要提到路由配置文件的基本结构，比如创建router/index.js，并在main.js中注入router实例，如引用[1]中的代码示例所示。 另外，常见问题可能包括版本不匹配导致的错误，解决方案是检查版本并重新安装。比如，Vue 2项目应使用vue-router 3.x，而Vue 3则需要vue-router 4.x。用户如果遇到安装错误，可以尝试清除node_modules并重新安装，或者使用--legacy-peer-deps参数绕过依赖问题。 最后，生成相关问题需要考虑用户可能进一步想知道的内容，比如版本差异、配置步骤、错误处理等。确保回答结构清晰，步骤明确，并引用提供的参考资料来增强可信度。</think>### 如何通过 Vue CLI 安装 vue-router？ #### 方法 1：创建新项目时直接集成 1. **初始化 Vue CLI 项目** 运行以下命令创建项目： ```bash vue create my-project ``` 2. **选择手动配置** 在功能选择界面，通过空格键勾选 `Router` 选项： ```bash ? Check the features needed for your project: ◉ Babel ◉ Router # 选中此项 ◉ Vuex ``` 3. **完成配置** Vue CLI 会自动安装 `vue-router` 并生成基础路由文件（如 `src/router/index.js`）。 --- #### 方法 2：在已有项目中手动安装 1. **安装 vue-router** - **Vue 2 项目**（对应 `vue-router@3.x`）： ```bash npm install vue-router@3.5.2 --save # 或解决依赖冲突 npm install --legacy-peer-deps vue-router@3.5.2 ``` [^2][^3] - **Vue 3 项目**（对应 `vue-router@4.x`）： ```bash npm install vue-router@4 ``` 2. **配置路由** - 新建 `src/router/index.js`： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', component: Home } ] const router = new VueRouter({ mode: 'history', routes }) export default router ``` 3. **注入主实例** 在 `main.js` 中绑定路由： ```javascript import router from './router' new Vue({ router, // 关键注入点 render: h => h(App) }).$mount('#app') ``` [^1] --- #### 常见问题解决 - **版本冲突**：若出现 `npm ERR! Could not resolve dependency`，尝试： ```bash npm install --legacy-peer-deps vue-router@指定版本 ``` - **路由文件缺失**：确保 `src/router/index.js` 存在且导出了路由实例[^1] - **Vue 2/3 版本对应**：Vue 2 → vue-router 3.x；Vue 3 → vue-router 4.x ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值