解决vue3router-view无法渲染以及在浏览器中router-link只能跳转地址无法显示页面

最新推荐文章于 2024-02-29 21:02:42 发布
最新推荐文章于 2024-02-29 21:02:42 发布
阅读量629 收藏 6
点赞数 8
文章标签： yarn vue.js npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52036334/article/details/136306335
版权

前期使用cnpm安装vuerouter一直失败，检查代码并无错误，最终通过终端运行yarn add vue-router@4，使用yarn重新安装vue-router成功运行！！！

小yuan不搜题
关注
  • 8
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3） 支持Vue路由器 Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑： 金牌赞助商 银牌赞助商 青铜赞助商 开始使用。 快速开始 通过CDN： [removed][removed] 浏览器在上的 将其添加到现有的Vue项目中： npm install vue-router@4 对Vue Router 3的更改 请查阅《 。 贡献 请参阅。 特
vue 路由不渲染问题
qq_38179462的博客
10-19 1122
跟着视频敲代码发现路由标签<router-view></router-view>就是不渲染 import Vue from 'vue' import VueRouter from 'vue-router' const Home = ()=> import('../views/home/Home.vue') const Category = ()=> i...
router-link可以跳转，但是router-view不渲染页面
weixin_45612718的博客
05-26 1227
记一次很愚蠢的错误 错误：添加了router-view标签后，仍然不渲染页面，不显示页面内容 通过上网查找，试了很多种不同的方法，很多人是因为routes写成routers导致不渲染，但是自己没有问题，经过检查路径，检查路由引入等各方面的内容，最终发现把组件的英文单词写错了 错误写法： 正确写法： 组件这个单词写错不是第一次了，记录一下错误提醒自己 ...
router-view 不渲染
qq_27681677的博客
03-29 825
一般做vue项目使用vue-router的时候，会突然发现router-view不渲染，并且没有报错的问题出现，会搞的一头雾水，寻找逻辑，文件命名及引入也没有什么毛病，大概率上就是很小的细节上我们给忽略掉了，以致找不到问题所在，一般情况下，很容易忽视的一个错误是routes写成了routers,另外一个呢，就是component写成了componets.（如上图红框所示的位置。
vue中的router-view组件的使用教程
10-17
主要介绍了vue中的router-view组件的使用教程，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue-router 中router-view不能渲染的解决方法
12-08
最近在做一个vue的项目，其中使用了vue2.0,vue-router2.0。在使用vue-router的时候跳了一个很大的坑，router-view不能渲染，花费了好多时间终于发现了原因。 项目目录结构 其中main.js import Vue from 'vue'; import App from './App'; import router from './router'; /* eslint-disable no-new */ new Vue({ el: '#app', router, render: h => h(App) }); app.vue
Vue中router-view无法显示
热门推荐
qq_54727445的博客
12-20 1万+
Vue中router-view无法显示可能是导入了什么不合适的文件导致
Vue中使用router-view渲染不成功
weixin_56035334的博客
06-06 5376
在div中引入router-link标签实现路由的切换后，再在指定的位置使用router-view显示与 url 对应的组件，发现页面无法正常渲染。
vue3 Failed to resolve component: router-view
weixin_39114917的博客
10-24 1967
vue3路由配置运行报错
官方的js路由router
weixin_40945354的博客
02-09 1035
// 1. 定义路由组件. // 也可以从其他文件导入 const Home = { template: '<div>Home</div>' } const About = { template: '<div>About</div>' } // 2. 定义一些路由 // 每个路由都需要映射到一个组件。 // 我们后面再讨论嵌套路由。 const routes = [ { path: '/', component: HelloWorld }, { pa
vue-router-view-transition:使用scrollBehavior正确地进行超时转换
03-10
vue-router-view-transition 与scrollBehavior兼容的路由器视图的过渡包装器 安装 npm install vue-router-view-transition # or yarn add vue-router-view-transition 用法 该库导出一个组件和一个函数。 您需要同时使用以下两者： 首先，您可以全局安装组件RouterViewTransition ： import { RouterViewTransition } from 'vue-router-view-transition' Vue . component ( 'RouterViewTransition' , RouterViewTransition ) 或将其本地导入到任何Vue组件中： import { RouterViewTransition } from 'v
vue：router-view二次渲染误操作
weixin_44241773的博客
02-10 1320
router-view二次渲染解决方法以及原因分析
vue路由＜router-view＞＜router-link＞
qq_42855675的博客
02-20 2743
https://www.cnblogs.com/bydzhangxiaowei/p/9055484.html 文章目录什么是路由路由中三个基础的概念路由实现案例 什么是路由         路由，其实就是指向的意思。         当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示abou
vue2进阶篇：vue-router之缓存路由组件
刘大猫
07-09 1990
vue2进阶篇：vue-router之缓存路由组件
vue3+vite动态权限路由，路由跳转了页面没有渲染，直接空白（后台管理项目）
QIAO_hh的博客
05-11 1903
vue3+vite动态权限路由，路由跳转了页面没有渲染，直接空白（后台管理项目）
【vue-router】关于在vue3项目中使用vue-router碰到的坑(路由跳转但是页面不更新)
RanDoll_的博客
05-22 7579
首先来说第一个问题，解决思路很简单，就是在路由跳转的时候重新加载组件嘛，只需要给router-view添加一个和路由变化时相关的key就可以了，这样在渲染虚拟dom的时候算法就会判断两次的组件是有区别的，虽然看起来很简单，但是作者一开始没想到这个地方，使用了状态管理器，自定义事件等等方法，现在想来这些方法有些还是能成功奏效的，但是由于第二个问题的存在，这些问题都失败了。
使用vue3的router-view但页面不渲染的解决方法
最新发布
m0_60458910的博客
02-29 641
一个解决vue中router-view页面不渲染的方法，关键在与Vetur。
Vue3+vite2打包路径和路由router-view不显示问题
weixin_43575792的博客
01-23 7419
Vue3+vite2打包路径跳坑前言一、打包默认路径二、css的@charset UTF-8规则三、路由router-view不显示总结 前言 博主使用vue3+vite2打包项目部署到服务器上时遇到几个有关路径的坑，将这些坑的原因及解决方法提供给大家，希望大家可以有所收获 一、打包默认路径 以前在vue2+webpack中我们在vue.config.js配置publicPath设置静态资源访问路径，但现在使用vue3+vite2环境我们需要在vite.config.js里面配置base;顺便一提，里面的
vue3的router-view和router-link
08-19
Vue 3的router-view和router-link是Vue Router提供的两个核心组件，用于实现路由导航和视图渲染的功能。 router-link是一个用于生成链接的组件，它会自动根据路由配置生成对应的链接，并在用户点击时触发路由跳转。你可以使用to属性指定链接的目标路由，例如to='home'表示跳转到名为home的路由。 router-view是一个用于渲染视图的组件，它会根据当前路由的路径匹配路由配置中的组件进行渲染。在你的应用中，你可以将router-view放置在合适的位置，它会根据当前路由的变化自动切换渲染的组件。 通过在Vue组件中使用router-link和router-view组件，你可以实现简单而灵活的路由导航和视图切换功能，让用户可以方便地浏览不同的页面内容。 请注意，以上是Vue 3中使用router-view和router-link的基本用法。具体的配置和使用方式可能会因你的项目需求和Vue Router的版本而有所不同。如果你遇到了具体的问题和报错，请提供更多的信息以便我能够更详细地回答你的问题。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [【JavaScript源代码】Vue router-view和router-link的实现原理.docx](https://download.csdn.net/download/mmoo_python/72117437)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue3引入vue-router无法使用router-link、router-view组件](https://blog.csdn.net/m0_67108146/article/details/125198929)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小yuan不搜题

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值