vue-router页面加载不出来

最新推荐文章于 2025-06-11 14:41:06 发布
原创 最新推荐文章于 2025-06-11 14:41:06 发布 · 5.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文解决了一个常见的Vue-router配置错误，即将routes误写为routers，导致页面加载失败的问题。通过纠正这一错误，页面正常加载。

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

vue-router页面加载不出来

代码：

import VueRouter from 'vue-router'
import routers from './routers'

Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'history',
    routers
})

 

原因：

routes：不是routers

解决办法：

routers改为routes即可。

 

Vue 路由跳转不加载问题分析与解决
Book_Sea的博客
09-29 3674
如果路由配置有误，可能会导致路由跳转后页面不加载的问题。在使用 Vue Router 进行路由跳转时，我们应该注意正确配置路由、版本兼容性、组件缓存、异步加载和组件内部问题，以确保页面能正常加载。在 Vue.js 中，使用 Vue Router 可以实现单页应用的路由功能，方便我们进行页面跳转和组件加载。Vue Router 默认开启了路由组件的缓存机制，即同一个路由组件在第二次访问时不会重新加载，而是直接使用缓存的组件实例。如果你的应用中使用了异步加载路由组件的方式，可能会导致页面不加载的问题。
vue路由切换组件没有加载_vue-router 路由跳转后没有加载组件
weixin_39806948的博客
12-22 1846
router.js 路由部分export const normalRouter = {path: '/',meta: {login: false},component: () => import('@/views/normal/home'),redirect: '/pagelist',children: [{name: 'normalPageList',component: () =>...
前端项目启动了，访问不了
最新发布
weixin_47064437的博客
06-11 165
【代码】前端项目启动了，访问不了。
vuerouter组件内的导航钩子,vue router组件加载不到
神经网络爱好者
09-15 204
这就要在js文件中配置路由。1，route，它是一条路由，由这个英文单词也可以看出来，它是单数，Home按钮=>home内容，这是一条route,about按钮=>about内容，这是另一条路由。Home按钮=>home内容，about按钮=>about内容，也可以说是一种映射.所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about按钮，页面中就要显示about的内容。
vue-router动态路由 刷新页面 静态资源没有加载的原因
weixin_30871293的博客
04-13 3417
在做项目的时候，发现刷新页面的时候，静态路由没有加载，度娘了一圈，终于解决了。 vue-router使用history模式+使用嵌套路由： 访问路由和嵌套路由页面，显示正常，但是刷新页面的时候，嵌套路由页面就出异常了： 官方文档对嵌套路由的说明——https://router.vuejs.org/zh-cn/essentials/nested-routes.html 我最初做的时候是在in...
vue-router 嵌套路由组件加载失败
baidu_36831253的博客
08-23 4225
https://www.cnblogs.com/xiaochongchong/p/7773239.html 总，父-子路由，父要有组件，子组件事嵌套在父组件上的router-view上
vue-router懒加载速度缓慢问题及解决方法
10-17
如果在实施懒加载后发现页面加载速度仍然缓慢，则可能需要进一步优化。以下是一些常见的解决方法： 1. 分析打包体积：使用webpack-bundle-analyzer等工具分析打包后的文件体积，找出体积过大的部分，并进行针对性...
vue-router路由懒加载的实现（解决vue项目首次加载慢）
10-18
在现代Web应用程序中，用户对页面加载速度的要求越来越高，单页面应用（SPA）由于其丰富交互和用户体验，已成为主流。其中Vue.js作为一个流行的前端框架，配合vue-router可以非常方便地实现SPA的路由管理。但是，...
解决VUE-Router 同一页面第二次进入不刷新的问题
10-15
这里推荐使用localStorage来存储需要持久化的内容，例如，在跳转之前保存数据，在目标页面加载后从localStorage中获取数据。 最后，文章还提到了一个补充知识，即如何解决通过params传递参数且页面刷新后参数丢失的...
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
5. **路由懒加载**：Vue Router 支持路由懒加载，可以按需加载组件，减小首屏加载体积。例如，通过`import()`动态导入组件。 6. **命名视图和嵌套路由**：对于复杂应用，可以使用命名视图实现多个并列视图，或者...
Vue-Router实现页面正在加载特效方法示例
08-31
在 Vue-Router 中实现页面加载特效，首先我们需要理解路由数据的生命周期。当路由发生变化时，Vue-Router 会触发相应的生命周期钩子，我们可以利用这些钩子来执行数据获取并控制页面的显示状态。以下是一个具体的...
vue-router 复用原有页面 不会加载
小马哥的天涯
05-20 1025
vue-router 复用原有页面 不会加载 有的时候 我们在使用 v-router时候 只是修改 params或者query参数值的时候 页面不会重新加载 因为路由是一样的规则 vue则会认为是一样的页面 然后就是复用该页面 而不是 重新加载 导致 我们在生命周期钩子 如 created 、mounted中 调用一些方法 等 不起着用 这个时候 我们就需要使用 vue...
VueRouter按需加载
qq_39914739的博客
11-11 457
如果router.js中全部都使用下面这种方式引入路由组件，那么所有组件都打包在一个js中，导致进入首页时，加载时间相对过长。 那么如何优化性能呢？我们可以使用以下两种方式： （1）使用require这种方式，只有访问这个路由时才会加载这个js.即就是把路由组件分别打包成不同的js，需要才加载。 （2）使用syntax-dynamic-import，但是必须先安装，因为import是es7语法。 cnpm install --save-dev @babel/plugin-syntax-dynam
vue-router中手动输入url地址beforeEach不生效
karlif的博客
08-24 1924
** vue-router中手动输入url地址beforeEach不生效 **在手动输入地址栏url时候，new Vue()函数未将router.beforeEach()这个函数加载到实例中去。 解决方法：将router.beforeEach()这个函数写到Vue实例加载之前，在手动输入地址栏时候便可使得函数生效 插入链接与图片 图片: 代码如下 router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { if (local
【已解决】Vue的router-link地址变化但页面不刷新
蹦极的考拉
09-22 5127
由于最近搞了一般企业网站做练习，其中遇到各种的问题，今天无意中发现router-link点击产品的时候，列表页可以顺利进入详情页，但是详情页里面推荐产品却不能跳转。一般出现的情况：当前链接和政要点击的链接地址结构是一样的，就不能跳转了。（貌似是路由的过，因为路由结构本身没变化，所以网页不会刷新，而是变化的url而已）死活就是不跳转，但是url是变化的啊，抓耳挠腮大半天，查资料之后终于弄懂了这个问题。设置 router-view 的 key 属性值为 $route.fullPath。
手摸手教你vite + vue3 + tsx 项目打包后动态路由无法加载页面问题
weixin_58115275的博客
09-08 5016
解决vite打包后路由失效的问题
vue散记：router的两种加载方式(无法读取全局变量的问题)
tianjiliuhen的博客
10-12 1470
确定引入的Cenium没有问题，但是页面加载的时候，确实没有找到this.Cenium对象，Cenium全局变量是在main.js中定义的，说明，当前页面先于main.js加载了。组件不会立即渲染，而是在项目整体加载完成之后，访问时才会加载，也就是在 main.js 加载之后才会加载，所以可以正常使用 main.js 中定义的全局变量，适合普通页面。结论：router中使用懒加载方式加载组件时，组件中的js逻辑会在main.js加载之后才执行，所以可以正常加载全局变量。router的两种组件加载方式。
微人事 vue-roter4实现动态加载路由，解决[Vue Roter warn]: No match found for location with path “xxx“
热门推荐
qq_41725131的博客
11-28 1万+
目录一：使用router.addRoute()代替router.addRoutes()二：修改组件引入方式三：修改路由中重复的name值 最近在做微型人事项目，进行到左边导航菜单动态加载部分，前端所有的子项都无法打开 以基本资料为例，点击会在控制台弹出如下警告信息： 教程中src/utils/menus.js内的initMenu方法从后台请求得到动态的菜单栏数据data，使用formatRoutes方法将data中的“component”对应的字符串数据转化为.vue组件。 教程代码： import {
Vue-Router页面加载特效实现与示例
"Vue-Router 实现页面加载特效方法，涉及 Vue.js 单页应用、Vue-Router 路由管理、组件数据获取、HTTP 请求、动态过渡效果以及页面加载指示器的创建与隐藏。 在 Vue.js 和 Vue-Router 的环境中，页面加载特效通常...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值