开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Vue :添加路由器链接后不显示页面

Vue是一种流行的前端开发框架，用于构建用户界面。它采用了组件化的开发方式，使得前端开发更加模块化和可维护。Vue提供了一套完整的工具链，包括路由器（Vue Router）用于管理页面之间的导航。

当在Vue中添加路由器链接后，页面不显示的问题可能有以下几个原因：

路由器配置错误：首先，需要确保已正确配置Vue路由器。在Vue中，可以使用Vue Router来定义路由规则，并将路由器链接添加到页面中。确保在路由器配置中指定了正确的路径和组件。
组件未正确引入：如果路由器链接已添加，但页面仍然不显示，可能是因为相关的组件未正确引入。在Vue中，每个路由对应一个组件，需要确保已正确引入并注册了相关的组件。
路由器视图未正确渲染：Vue Router提供了一个专门用于渲染路由组件的视图容器，通常称为<router-view>。确保在页面中正确使用了<router-view>标签，并且路由器链接所对应的组件能够正确渲染在该视图容器中。
路由器模式配置错误：Vue Router支持两种路由模式：hash模式和history模式。如果使用了history模式，需要确保服务器已正确配置以支持该模式。否则，页面可能无法正确显示。

综上所述，当在Vue中添加路由器链接后不显示页面时，需要检查路由器配置、组件引入、视图渲染和路由器模式等方面的问题。根据具体情况进行排查和修复。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
区块链（BCS）：https://cloud.tencent.com/product/bcs
元宇宙（Tencent XR）：https://cloud.tencent.com/product/xr

相关搜索:PHP不显示错误，在添加验证后不插入任何错误 razor下拉列表添加数据，但在刷新页面后显示 React路由器链接不刷新页面 SPA路由器链接显示两个页面 Vue Socket.io-切换路由器页面后，扩展了this.$socket.$subscribe不是一个函数 Vue-router路由到错误的页面，链接必须在路径前添加'#‘Vue路由器在硬刷新后不工作 Vue路由器在页面重新加载后更改url。Vue路由器，更改路径后页面不起作用单击链接，让div在不转到新页面的情况下更改显示的PDF

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

vue 改变数据后，数据变化页面不刷新

导文在vue项目中，会遇到修改完数据，但是视图却没有更新的情况vue 改变数据后，数据变化页面不刷新vue 改变数据后，需要滑动页面，数据才更新vue中表格数据已改变，页面却未更新数据文章重点方法一：使用...方法二：Vue.set(object, key, value)使用方法：add() { this.$set(this.obj, 'name', '张三')}方法三：this....$nextTick 跟全局方法 vue.nextTick 一样，不同的是，回调的 this 自动绑定到调用它的实例上。使用方法： this.

2.5K3 0

weex eros APP 如何在vue页面显示图片，循环添加多张图片显示在vue页面上

https://blog.csdn.net/acoolgiser/article/details/89016852 这里笔者介绍使用weex eros框架开发APP时遇到的在页面上添加图片的问题...：一、首先是添加一张图片第一种方式：img标签第二种方式：image标签两种标签均支持，但是与普通的HTML页面写法不一样，两种方式都必须给图片标签添加class属性设置图片的width和height，否则不会显示在eros...APP上，笔者认为这是由于weex eros框架对vue封装的结果，导致了写法的变化。...imageList" :key="item_img.id"> 当然，vue

2K2 0

unaipp客服系统APP退出登录后，解决登录页面不刷新保留WebSocket链接问题

需求在客服APP或H5验证失效，或者点击退出登录后，在登录页仍然会收到WebSocket发来的消息解决方法这是因为uniapp跳转到登录页时，仍然保留着之前的页面栈，我需要在登录页强制刷新一下，就能清掉页面栈...在登录页获取下页面栈的个数，大于1的时候，说明有其他的页面，就强制刷新 // 页面显示 onShow() { let pages = getCurrentPages

1.4K2 0

vuex刷新后数据消失_如何解决vue修改数据不刷新页面

vue 页面刷新数据存储 // 在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem('caramaAdd'...sessionStorage里 // beforeunload事件在页面刷新时先触发 window.addEventListener('beforeunload', ()...$store.state.creame)); }); 是不是特别简单，底下存储，上边跟新，但是被忘了，退出该页面时，需要删除存储的值，否则当你再次进入时，存储的还是当前值，一定要记得哦...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。...发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/181189.html原文链接：https://javaforall.cn

1.8K2 0

Vue（七）SPA 单页面及应用方式「建议收藏」

页面切换动画几乎不可能实现页面切换动画，因为页面切换需要同时看到前一个页面的后一半以及后一个页面的前一半；多页面应用不可能两个页面同时存在，所以无法实现。...在唯一完整的 HTML 页面顶部引入 vue-router.js（官方）； b. 创建路由器对象。...Vue.component("组件标签名", 组件对象名); 如果所有页面都需要显示页头，则只要在上方添加标签即可；如果有的页面有页头，有的页面不需要页头...--为所有页面添加页头--> <!...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

1.9K2 0

Vue04路由--SPA+ 使用路由建立多视图单页应用+router-link相关属性+【面试题：js中const,var,let区别】

传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（单页应用）的路径管理器。...再通俗的说，vue-router就是我们WebApp的链接路径管理系统。...route和router的区别 route：路线 router：路由器 路由器中包含了多个路线 3.3.2 定义路由 //定义路由，"/"代表根路径，路由中可以使用name属性，一遍情况不建议使用...属性指定边界，使用路由后需要使用Vue实例$mount方法挂载根实例 //创建和挂载根实例 var vm = new Vue({ //el: '#app', //将路由放入vue实例...4.3 append 设置 append 属性后，则在当前 (相对) 路径前添加基路径。

2.5K3 0

vue3页面中，同时展示和隐藏相同的组件，后展示的组件事件监听不生效？

场景：在实际开发中，遇到了这样一种场景，vue3页面，两个相同组件，在满足某条件下 v-if 展示第一个组件，满足另一个条件下， v-if 隐藏第一个组件，同时展示第二个组件，比如反馈组件，会通过 window.addEventListener...结果：两个相同组件一个卸载，一个挂载，第一个组监听的反馈弹窗展示和隐藏事件都可以生效，后展示的组件事件监听都不生效........示例如下： import { onBeforeUnmount } from 'vue' window.addEventListener('feedbackShow... 同时卸载的组件，onBeforeUnmount 的执行时机会晚于同时挂载组件的 setup 时机，从而导致第二次挂载的组件的新监听的事件被第一次组件的事件卸载一次性remove 了，所以导致后一个组件的事件监听不生效...最终： import { onMounted, onBeforeUnmount } from 'vue' onMounted(()) => {

2921 0

Vue的一些命名规则与SPA实现思路

3.5 前面使用RouterLink和RouterView组件导航和显示 4. router-link相关属性 4.1 to 表示目标路由的链接 4.2 replace ...4.3 append 设置 append 属性后，则在当前 (相对) 路径前添加基路径。...var vm = new Vue({router: router}).$mount('#app'); 3.5 前面使用RouterLink和RouterView组件导航和显示 4. router-link相关属性 4.1 to 表示目标路由的链接...(相对) 路径前添加基路径。

1.9K1 0

Vue-Router学习笔记，持续记录

但是这样存在一个问题，就是 url 每次变化的时候，都会造成页面的刷新。那解决问题的思路便是在改变 url 的情况下，保证页面的不刷新。...+Vue Router主要用于单页面应用创建；vue-router.js会暴露一个VueRouter构造方法，通过传入一个路由规则配置对象创建路由器（Router）; //Vue2.x const router...单页面应用下，用户点击刷新 history模式下，路由变化会改变当前的URL，正常的浏览器环境下，用户刷新时，请求的链接仍然是最开始请求的入口链接。但是在企业微信的浏览器内，则是用改变后的链接去刷新。...7.记录一次vue-router不渲染组件全局路由守卫调用的函数内，没有调用next，导致整个逻辑被挂起，不渲染组件。 8.路由匹配的优先级经过测试，先定义的路由优先级低于后定义的路由。...解决办法：router-view页面添加key，将fullPath作为每个页面的唯一值，当key值不同时，页面就会刷新

9.2K4 0

Vue中实现路由跳转传参

关于它的详细信息请看官方文档：API 参考 | Vue Router这个组件接受以下属性参数，在这里我们说一说在使用中要注意的一些问题：replace添加这个属性的路由在导航后不会留下...传递后形成的路径：/path?参数名=参数值。// query传参数 ————类似get，浏览器地址栏中显示参数this....id=1，刷新页面后参数id还在，会一直保留，也就是说，query传参刷新页面后可以保存。另外，非重要性的可以这样传，密码之类等重要数据还是要使用params，这样数据安全。...params类似post，跳转之后页面 url后面不会拼接参数，也就是说地址栏不显示参数名称id，但是有参数的值，如果刷新页面后id会消失，也就是说，params传参刷新后不会保存（除非在路由规则里配置对应参数...项目中跳转到外部链接方法在项目文件中，如果是vue页面中的内部跳转，在js中用this.

661 0

懂个锤子Vue VueRouter路由深入浅出

创建路由器模块：在项目的src目录下创建一个router文件夹、文件夹内创建一个index.js文件，这是路由器的配置中心；2.导入Vue和Vue Router：在src/router/index.js...：在main.js中：导入之前创建的路由器实例，并将其注入到Vue实例中；import Vue from 'vue'import App from '....$mount('#app');Vue路由的进阶使用⏫：声明式导航-导航链接声明式导航：它允许开发者通过在模板中使用组件来定义导航链接，从而实现页面间的切换；<router-link...CSS类名来表示链接的激活状态：.router-link-exact-active 通常在，精确匹配整个路径时添加；.router-link-active 会在链接对应的路由被激活时添加，适用于模糊匹配...；/search/:words 表示，必须要传参数，如果不传参数，也希望匹配，可以加个可选符 "?"

551 0

【Vue3】Vue3中的编程式路由导航重点！！！

核心深度集成，让构建单页面应用变得轻而易举。...，可能会让用户产生一些大大小小的误会SEO问题：a标签可能会被搜索引擎误以为是外部链接，这可能会影响到页面的搜索引擎优化效果无障碍问题：对于使用辅助技术的用户（如屏幕阅读器用户），他们可能会期望标签是可以跳转到其他页面的链接...button，点击button后可以显示详细信息，和点击名字出现的效果是一样的查看英雄添加完了模版（这里别忘了加...下面是两者之间的主要区别：引入方式：Vue2：在 Vue2 中，你可以通过 this.$router 来访问路由器，从而进行编程式路由导航。...Composition API：Vue2：Vue2 中没有 Composition API，如果你想在方法中使用路由导航，通常需要将方法定义在 methods 中，并使用 this 来访问路由器。

3091 0

路由器的两种工作模式：hash模式和history模式

路由器（vue-router）有两种工作模式：hash模式和history模式，默认是hash模式。 hash模式的路由器 路由器默认的工作模式是hash模式。...放好后，访问localhost:3000。可以看到，history模式下的dist部署到服务器后，路由切换访问/home或/about时，没有问题。...但在/home时刷新页面，显示无法找到，报404。 hash模式下的dist部署到服务器后，就不会出现以上问题。解决404报错问题刷新时报404的问题，需要后端程序员的帮助。...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。...发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/234265.html原文链接：https://javaforall.cn

1.2K1 0

11 个高级 Vue 编码技巧

可以访问应用程序的所有可用路由，添加元数据以使逻辑更智能，甚至可以自动填充导航栏、页面面包屑等内容！然而，这乍一看并不明显，也不能像我们通常访问路由的方式直接访问。...我在路由器中的某些路由上设置了一个 showInSidebar 元数据属性，我想隐藏在侧边栏中。我还能够自动生成所有侧边栏链接，而无需对每个链接进行编码。以下是我设置路由器路由的方法： ?...我能够控制如何直接从路由器显示本地路由以及是否使用 API 提供的路由。我还用它来制作自动面包屑以显示用户的路线历史。...有了这个，如果路由器链接的目的地与当前路由匹配，Vue 会自动设置一个活动类。...只需在 app.js 文件中添加一个 watch: 在每次路由更改后触发滚动到顶部： // In App.vue watch: { $route() { window.scrollTo

2.6K3 0

10个关于 Vue 的高级开发技巧

可以访问应用程序的所有可用路由，添加元数据以使逻辑更智能，甚至可以自动填充导航栏、页面面包屑等内容！然而，这乍一看并不明显，也不能像我们通常访问路由的方式直接访问。...我在路由器中的某些路由上设置了一个 showInSidebar 元数据属性，我想隐藏在侧边栏中。我还能够自动生成所有侧边栏链接，而无需对每个链接进行编码。以下是我设置路由器路由的方法： ?...我能够控制如何直接从路由器显示本地路由以及是否使用 API 提供的路由。我还用它来制作自动面包屑以显示用户的路线历史。...有了这个，如果路由器链接的目的地与当前路由匹配，Vue 会自动设置一个活动类。...只需在 app.js 文件中添加一个 watch: 在每次路由更改后触发滚动到顶部： // In App.vue watch: { $route() { window.scrollTo

6.1K1 0

11 个高级 Vue 编码技巧

可以访问应用程序的所有可用路由，添加元数据以使逻辑更智能，甚至可以自动填充导航栏、页面面包屑等内容！然而，这乍一看并不明显，也不能像我们通常访问路由的方式直接访问。...我在路由器中的某些路由上设置了一个 showInSidebar 元数据属性，我想隐藏在侧边栏中。我还能够自动生成所有侧边栏链接，而无需对每个链接进行编码。以下是我设置路由器路由的方法： ?...我能够控制如何直接从路由器显示本地路由以及是否使用 API 提供的路由。我还用它来制作自动面包屑以显示用户的路线历史。...有了这个，如果路由器链接的目的地与当前路由匹配，Vue 会自动设置一个活动类。...只需在 app.js 文件中添加一个 watch: 在每次路由更改后触发滚动到顶部： // In App.vue watch: { $route() { window.scrollTo

2.5K2 0

10个关于 Vue 的高级开发技巧

可以访问应用程序的所有可用路由，添加元数据以使逻辑更智能，甚至可以自动填充导航栏、页面面包屑等内容！然而，这乍一看并不明显，也不能像我们通常访问路由的方式直接访问。...我在路由器中的某些路由上设置了一个 showInSidebar 元数据属性，我想隐藏在侧边栏中。我还能够自动生成所有侧边栏链接，而无需对每个链接进行编码。...我能够控制如何直接从路由器显示本地路由以及是否使用 API 提供的路由。我还用它来制作自动面包屑以显示用户的路线历史。...在我的 SideNavbar 组件模板中：你可能已经注意到了exact-active-class代码：有了这个，如果路由器链接的目的地与当前路由匹配，Vue 会自动设置一个活动类。...只需在 app.js 文件中添加一个 watch: 在每次路由更改后触发滚动到顶部： // In App.vue watch: { $route() { window.scrollTo

6K2 0

BuildAdmin05：如何玩转Vue路由动态加载

什么是路由 路由器大家都听过吧，你电脑、手机都连这路由器和别人聊天。对面给你发了一条消息，先到路由器，路由器然后再转发给你的电脑或者手机上。...如果我需要新增一个Vue页面，只需要把这个vue文件放到项目的目录中，然后在数据库中新增一条路由信息。...方式二报错信息如下：我们再看看router对象路由在动态加载前和加载后的区别。可以看到多了新增的三条路由。...我点击了某一个路由，然后刷新浏览器，就会提示无法匹配这个路由，main区域就没有页面显示，然后显示404，并跳转到上一个页面。...在后面Loading页面的实现时，我加了一条路由就把这个问题解决了，这里就先不纠结这个问题。至于为什么为跳转到上个路由，是因为加载404之后，调用了router.back回到上个路由。

5810 0

快速上手Vue Router和组合式API：创建灵活可定制的布局

---- Vue Router 是在 Vue.js 单页应用程序中创建路由的事实标准。但是，你是否知道，除了使用它将路由映射到页面组件之外，还可以使用它来组合页面布局？这是一个有趣的建议。...然而，让我们考虑一种替代方法，即在路由器级别而不是页面级别组成布局。...这就是将显示在RouterView组件中。...现在，为了让 LeftSidebar 和 RightSidebar 组件知道在哪里显示，我们必须使用额外的路由器视图，称为命名视图，以及我们的默认路由器视图。...我们还可以将路由器视图包装在带有一些 Tailwind 类的 div 中，以便美观地布局。 <!

1.2K1 0

Vue.js知识点整理

其实和data中的变量打散后是平级的。都直接隶属于new Vue()对象 } }}) • 其实,如果不传参,则@事件名="函数"后不需要加() • 传参 • V)而页面上的更改，无法对应修改到Model数据中(V =X> M)何时: 今后，只要希望修改表单元素的值后，也能自动修改对应模型数据的值...强调: vue官方没有提供任何预定义过滤器，只能自定义何时: 有些数据，经常需要加工后再显示给用户时如何创建自定义过滤器创建自定义过滤器Vue.filter('过滤器名', function(oldVal...将路由器对象引入到唯一完整的html页面中new Vue({ ..., router})5. 如果有全局组件，不需要创建为子组件，依然用Vue.component()创建。

3181 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭