Vue(router-link路径可以切换，但是router-view标签内容不显示)

最新推荐文章于 2024-09-20 17:13:11 发布
最新推荐文章于 2024-09-20 17:13:11 发布
阅读量2.3k 收藏 2
点赞数 3
分类专栏： 问题 文章标签： vue javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KKGDGN/article/details/107518051
版权

今天下午跟着视频练习Vue,可是突然卡壳了，卡了好久，对着视频都没有问题，最后网上找的了原因，居然是单词写错了！！！ 坑爹呀！？！
第三行的单词routes写成了routers。记录一下 。

//配置导出路由
export default new Router({
   
  routes: [
    {
   
      //路由路径
      path: '/content',
      //跳转组件
      component: C
最低0.47元/天 解锁文章
不爱吃垃圾的小王
关注
专栏目录
el-menu+vue-router导航路由跳转
sinat_36227086的博客
08-20 1479
vue+elementui+vue-router使用el-menu实现导航路由跳转 1.element-ui.common.js:3383 TypeError: Cannot read property ‘push’ of undefined
【vue2第十五章】VueRouter 路由配置(VueRouter)与使用 和 router-link与router-view标签使用
weixin_72979483的博客
09-07 2257
Vue Router 是 Vue.js 官方提供的路由管理器。它能够帮助你在 Vue 单页面应用（SPA）中实现页面之间的导航和路由功能。它是一种映射关系，映射了页面组件与路径的关系。如何配置VueRouter 1. 下载vue-router因为它是一个单独的模块所以需要下载。 **vue2对应的vue-router版本是 vue-router3.x vue3对应的vue-router版本是 vue-router4.x** 使用npm下载：`npm install vue-router
解决＜router-view＞＜/router-view＞未渲染出来的问题
qq_41630045的博客
08-12 6839
问题就是这样，百度了下，发现许多人犯的错误是把routes写成了routers,但是我的单词拼写正确，在页面上就是渲染不出来 <router-view></router-view>未渲染出来的问题.原因很简单。 **组件的声明**写在**VueRouter**的**后边了**，写在**前边**就好了。 ![正确的写法](https://img-blog.csdnimg.cn/20200812094247400.png?x-oss-process=image/watermark,typ
Vue(13)——router-link
最新发布
m0_74386799的博客
09-20 700
vue-router提供了一个全局组件router-link(取代a标签)右键检查，发现多了两个类：可以直接写样式：点击即可显示高亮。router-link-active 模糊匹配to="/my" 可以匹配/my /my/a /my/b .....router-link-exact-active 精确匹配to="/my" 只能匹配/myrouter-link的类名太长了，可以通过配置实现定制：linkActiveClass:"类名1",
路径可以切换，但是router-view标签内容不显示问题
qq_44209563的博客
12-21 5457
在写一个简单demo的时候，发现点击router-link标签以后，地址栏的路径已经发生改变，但是router-view标签的内容就是显示不出，而且没有报任何错误，配置步骤该有的都有了， 然后坑爹的地方来了，发现竟然是自己单词拼写错误，在此记录下，顺便提醒下大家 export default new Router({ routes: [ { path...
router-link可以跳转，但是router-view不渲染页面
weixin_45612718的博客
05-26 1342
记一次很愚蠢的错误 错误：添加了router-view标签后，仍然不渲染页面，不显示页面内容 通过上网查找，试了很多种不同的方法，很多人是因为routes写成routers导致不渲染，但是自己没有问题，经过检查路径，检查路由引入等各方面的内容，最终发现把组件的英文单词写错了 错误写法： 正确写法： 组件这个单词写错不是第一次了，记录一下错误提醒自己 ...
router-link 地址可以改变，但是router-view不渲染
Celine
11-09 5620
1、看到这个标题百度，很多出现的问题都是单词拼写错误，比如export default new Router( { routes: [ { path：'\', component:home } ] })很多强调的就是上面的routes不能有错误,因为很多人写的时候哦会写成routers2、我的错误是因为当时用vue-cl
【JavaScript源代码】Vue router-view和router-link的实现原理.docx
12-29
`<router-link>` 和 `<router-view>` 是 Vue Router 提供的两个核心组件，它们协同工作，实现了单页面应用(SPA)中的导航和视图切换。 **1. `<router-link>` 的实现原理** `<router-link>` 是 Vue Router 用于创建...
详解vue-router 2.0 常用基础知识点之router-link
12-09
在Vue 2.0中，`router-link`组件是用于创建导航链接的关键元素，它与`router-view`配合使用，实现了单页面应用(SPA)的页面切换。 首先，我们来看`$route.params`。这是一个对象，存储了动态路径参数和全匹配片段。...
解决vue-router 切换tab标签关闭时缓存问题
10-15
在Vue.js应用中，使用Vue Router进行页面导航时，可能会遇到一些关于页面缓存的问题，尤其是在涉及切换Tab标签时。本文将深入探讨如何解决Vue Router切换Tab标签时关闭页面仍保持缓存的状态。 首先，Vue Router中的...
Vue-cli4项目打包后router-view中的内容不显示的问题解决
qq_38883889的博客
12-23 907
vue3或vue4 打包后无法显示页面router-view中的内容问题解决方案
vue部署到服务器路由为空,vue组件化部署到服务器router-view里边的内容为空
weixin_34259816的博客
08-09 558
使用vue-cli脚手架搭建的项目，本地都没有什么问题，执行npm run build压缩后把dist文件夹丢到服务器，控制台可以看到js和css都进来了并无报错，但是首页index.html里的router-view里的内容为空。如果只把dist里边内容放在根目录，没有嵌套dist这个文件夹的话又是可以的，一直想不通啊，请大神指点一二。这是首页的index.html的内容，js和css路径保证无...
＜router-view＞＜/router-view＞渲染空白,但没有任何错误提示
qq_45469341的博客
05-21 1574
渲染空白,但没有任何错误提示 原因一：‘routes’写为’routers’ const routes= [{ //变量名是routes,而不是routers path: '/home', component: Home }, { path: ' /about', component: About } ] const router = new VueRouter({ // 配置路由和组件之间的映射关系
解决路由跳转时router-view不显示的问题
DangR_Jisoo的博客
03-06 4359
你可能会遇到点击<router-link>标签至跳转页面，但跳转页面，没有显示的问题，其原因可能是在index.js里创建的vuerouter对象里面的属性书写错误，其属性值是routes而不是routers //App.vue <template> <div id="app"> <router-link to="/home">首页</router-link> <router-link to="/about">关于&
你的router-view为什么不会显示？
m0_50546235的博客
11-29 1234
项目场景： 使用router-view之后对应的组件并没有展示，页面空白 原因分析： 配置路由s 而不是配置路由器s 看看官方案例：
路由跳转，router-view不显示组件页面的几个可能出现的问题及解决方案
weixin_60196946的博客
05-10 2751
路由跳转，router-view不显示组件页面的几个可能出现的问题及解决方案
vue2 vue-router 不显示页面问题
LlanyW的专栏
10-30 1万+
最后发现是vue-router版本的问题,最新的版本是4.x.x ， 使用cnpm install vue-router -S， 时默认安装了最新。我的项目的问题是，版本不兼容，环境配置不对。在项目配置的时候，默认 npm 包导出的是运行时构建，即 runtime 版本，不支持编译 template 模板。vue 在初始化项目配置的时候，有两个运行环境配置的版本：Compiler 版本、Runtime 版本。首先去看了是否是vue-router引用的问题,排除掉引用问题之后,网上冲浪找了不少方法,
Vue路由跳转但显示空白页面
热门推荐
weixin_51173316的博客
08-03 3万+
在router文件下的index.js 中配置了‘Hi’的子路由，但是点击跳转界面却不显示子路由的内容，但是url正常改变。 原因一： 没有在父路由中加上<router-view></router-view>，来将对应的组件内容渲染到router-view。 路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源(组件)的映射，通过一个路径的url地址，可以唯一找到一个资源。 解决方法：在父路由的...
解决新增的vue页面不能通过router-view显示出来的问题
l_iu11的博客
03-01 1583
创建了一个vue新项目，TestView.vue是我新增的，其它是通过脚手架创建自动生的。TestVIew页面配置了路由，但是页面跳转的时候渲染不出来，不清楚是什么原因。TestHello // 要被引用一下否则会报错。msg: "hello 这是主页",hello 这是主页{{ msg }}求教呀~~~~~，请问有人知道为什么吗？最后testview就是不展示。
vue router-link用法
08-13
vue router-link用法是通过<router-link>标签来创建页面导航链接。在使用<router-link>时，需要设置to属性来指定链接的目标路由。例如，可以使用<router-link to="/home">Home</router-link&gt...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值