Vue路由vue-router常见问题

最新推荐文章于 2023-11-20 15:53:56 发布
最新推荐文章于 2023-11-20 15:53:56 发布
阅读量441 收藏
点赞数 1
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54937289/article/details/127748502
版权

记录下自己写vue小项目路由出现的小问题
1.版本问题
写vue2的时候要注意插件的安装问题，这可能是致命的，一般不要安装最新插件，安装插件特定版本方法：npm i xxxx@2/3，xxx是插件名，@后面加版本号
2.没有Vue.use
在路由router/index.js中，引入插件后注意在Vue对象上使用use方法，不然会报错。
请添加图片描述
3.没有在main.js入口中引入
写完路由规则后暴露的router实例，没有在入口文件中导入感觉是相当于没写，所以一定要“使用”-》即要使用和引入。
请添加图片描述
4.路由规则不要出现空括号！！！
像这样子是不允许的！！！！
不然就会报这个错误：“path” is required in a route configuration.
请添加图片描述

迷茫的Queteen
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Vue Router】问题集锦
Beam
11-30 863
问题一、重复点击报错 连续点击同一个路由，第二次点击时报错NavigationDuplicated。如图所示： vue-router引入的地方加上如下代码段即可 import VueRouter from 'vue-router' // 解决重复点击菜单导航报错：NavigationDuplicated 的问题 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push (location,
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
vue-router-nav-呈现vue-router路由的简约响应式导航栏。-Vue.js开发
05-27
vue-router-nav呈现vue-router路由的简约响应式导航栏。 观看演示。 依赖关系您需要拥有vue-router insta vue-router-nav简约的响应式导航栏，用于呈现vue-router的路由。 观看演示。 依赖关系您需要安装vue-router才能使vue-router-nav正常工作。 安装npm install vue-router-nav --save用法从'vue-router-nav'Vue.use（RouterNav）导入RouterNav
vue-router 使用，添加动态路由，以及报错问题
最新发布
一切都不太晚
11-20 2285
在使用vue3 的小伙伴，在使用vue3 时候必须使用vue-router4，我最近在使用这个时候异常恼火，因为报错[Vue Router warn]: No match found for location with path "xxx" 解决了好几天，才玩明白，话不多说我们一步一步来， 采用静态路由和动态路由结合，来解决这个问题
vue-router 路由超详细教程
热门推荐
weixin_47124112的博客
09-06 3万+
路由（英文： router）就是对应关系Hash 地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1在项目中安装 vue-router。
Vue中路由传参常见的几个问题
XuZhiqiang的博客
02-15 334
路由传递参数（对象写法）path是否可以结合params参数一起使用? 如何指定params参数可传可不传? params参数可以传递也可以不传递，但是如果传递是空串，如何解决? 路由组件能不能传递props数据?
vue-router3.0版本中 router.push 不能刷新页面的问题
08-27
主要介绍了vue-router3.0版本中 router.push 不能刷新页面的问题,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue常见的路由问题
weixin_56122911的博客
01-22 402
vue常见的路由问题
学习vue-router遇到问题
xuexixuexien的博客
07-22 271
使用vue-cli 2.0版本创建的项目， 已经配置好vue-router，在浏览器中测试时却一直报错： 尝试了无数种办法后，仍无解，最后才发现原来是在入口文件main.js中的vue实例中的router属性写错了，写成了routers。 ...
vue-router路径问题
weixin_44414527的博客
12-19 805
问题 使用el-menu做了一个顶部导航栏，后面加了一个两级路径，类似于http://127.0.0.1/#/homepage/zhangsan，然后再点击导航栏，发现不能跳转到相应的页面了。 修改前的代码 navigator.vue <el-menu-item index="index">首页</el-menu-item> <el-menu-item index="...
vue路由参数遇到的相关问题
fengshalaiguo的博客
12-30 736
使用编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误 注意:编程式导航（push|replace）才会有这种情况的异常，声明式导航是没有这种问题，因为声明式导航内部已经解决这种问题 为什么会出现这种现象: 由于vue-router最新版本3.5.2，引入了promise，当传递参数多次且重复，会抛出异常，因此出现上面现象, 第一种解决方案：将vue-router降低到4的版本 npm install vue-router@4 第二种.
基于vue-router 多级路由redirect 重定向的问题
10-18
今天小编就为大家分享一篇基于vue-router 多级路由redirect 重定向的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue-router 嵌套路由没反应的问题
10-14
主要介绍了解决vue-router 嵌套路由没反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue学习之Vue-Router用法实例分析
11-28
Vue-router就像一个路由器，将组件(components)映射到路由(routes)后，通过点击<router>它可以在<router>中将相应的组件渲染出来。 1、使用vue-router的步骤 //1、创建路由组件 const Link1={template:'#link1'};...
Vue路由（vue-router）详细讲解指南
whicce的博客
11-28 2234
Vue路由（vue-router）详细讲解指南动态路由匹配：嵌套路由：路由导航两种方式： 转自：有梦想的咸鱼前端 Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转； 首先我们来学习三个单词（route，routes，router）：...
Vue--路由问题2
前端
01-07 362
之前已经对router问题有了个简单的介绍，这里再明确一些使用过程中的router问题 本文介绍的主要还是vue2.x中的设置 在vue2.x中，如果路由发生变化，可以通过以下方式监测路由变化 watch:{ '$route':(to,from){ this.id=to.param.id } } 路由导航 router-link用于控制路由的跳转 <router-link to="/normal">home</router-link> <router-link :to=
vue 配置路由问题
weixin_37254196的博客
01-17 331
废话不多说，直接开干！ 直接在./src/main.js配置即可 0.创建项目 1.安装vue-router npm install vue-router --save import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router'; Vue.use(VueRouter); //1.创建组件 import Home from './components/Home.vue'; import New
vue-router路由相关问题
weixin_43336525的博客
04-24 100
如果在嵌套路由的path前加上了’/‘，那么这个path就会被当作根路径。所谓根路径应该就是可以直接访问到的路径，vue-router应该会把以’/'开头的子路由与它所在的父组件默认绑定在一起，当我们访问/son时就相当于访问了/home/son。在学习Vue路由时经常会看到上述例子，这时候访问son组件的路由是/home/son。这时候只要我们访问主页面/home页面就会跳转到/son路由，在网上找了好多资料，最后在官网找到这样一句话。上边访问的路径是/home/son，而这里。这与上边有什么不同呢？
Vue2路由问题汇总
路在脚下，幸福在手中，莫贪！！！！！
06-08 3482
Vue2路由问题汇总
vue3使用vue-router路由拆分
09-06
在Vue 3中，使用Vue Router进行路由拆分可以帮助你更好地组织和管理你的路由配置。以下是一些步骤来实现路由拆分： 1. 安装Vue Router：首先，确保你的项目中已经安装了Vue Router。可以通过以下命令进行安装： ``` npm install vue-router@next ``` 2. 创建路由模块：创建一个新的模块来定义和配置你的路由。可以创建一个名为`router.js`的文件，并在其中导入Vue和Vue Router： ```javascript import { createRouter, createWebHistory } from 'vue-router'; const routes = [ // 定义你的路由配置 ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 3. 定义路由配置：在路由模块中，通过`routes`数组来定义你的路由配置。每个路由对象应该包含一个`path`属性和一个`component`属性，分别指定路由的路径和对应的组件。 ```javascript import Home from './components/Home.vue'; import About from './components/About.vue'; const routes = [ { path: '/', component: Home, }, { path: '/about', component: About, }, // 更多路由配置... ]; ``` 4. 在主应用程序中使用路由：在你的主应用程序中，导入并使用创建的路由实例。你可以在`main.js`文件中完成这个步骤： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; const app = createApp(App); app.use(router); app.mount('#app'); ``` 现在，你已经成功拆分了你的路由配置。你可以在每个组件中使用`<router-link>`和`<router-view>`来进行导航和渲染路由组件。 注意：以上只是一个简单的示例，你可以根据你的项目需求进行更复杂的路由配置和组织方式。不过，以上步骤应该可以帮助你开始使用Vue Router进行路由拆分。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值