vue-router使用过程遇到的问题
发布网友
发布时间：2022-09-10 08:06
共1个回答
热心网友
时间：2023-02-18 23:56
问题一、vue-router使用过程遇到的登录页空白问题
之前用vue-cli创建了一个vue项目，默认使用vue-router，目录结构中自带了router目录，里面有index.js
但是当我又创建一个项目的时候默认没有使用vue-router时，后面我使用npm install vue-router安装了插件之后项目中没有自动创建router目录。查找资料显示说这种方式不会创建router目录，自己就把前面创建的项目的router目录及里面的文件拷贝过来使用。
使用的过程中，新建立的项目我自己单独写了一个Login.vue，想把这个登录页面作为首页，使用vue-router配置。我就修改了router目录的index.js。如下：
main.js中引入router.js。如下：
到这里就是我找到的资料要配置登录页的，加上我不使用router-link，我就没有修改App.vue。我以为都配置完成了，就直接启动项目，发现页面空白。后来才发现App.vue中没有使用<router-view></router-view>。在App.vue加入<router-view></router-view>启动就成功显示登录页面了。
总结：使用vue-router，
1.需要在router目录的index.js维护好路由
2.main.js中引入router下文件
3.App.vue中使用router-view
最后还发现了一个问题，用 http://localhost:8080/访问title上的favicon没有显示；
用http://172.17.112.40:8080/访问title上的favicon就能显示
通过测试发现，好像是浏览器缓存问题，清除浏览器缓存又可以正常显示了。
问题二、使用vue-router过程中，子路由不显示问题
问题描述，我的项目是一个登录页面，项目默认显示登录页面；登录成功后显示登录成功后的默认页面，我的默认页面是由header公共导航和内容组件组成，这个时候出现了问题，header部分组件显示正常，但是内容组件不显示。经过分析查阅资料是因为父路由组件没有使用router-view导致的。我的header组件是由两个组件组成的，就在header组件内加上router-view登录成功后的默认页面就显示正常了。
HeadLayout.vue中增加router-view，解决子路由不显示问题
总结：要使用路由一定要在使用router-view，要在父级组件中使用。
问题三、子路由跳转问题
问题描述：原本MainMenu.vue中使用的是a链接，我添加的click方法进行路由切换，但是总是失败，切换后一闪第二个页面的内容，然后又显示第一个页面内容。写法如下：
第二个子路由页面内容闪一下
最终显示第一个子路由页面内容
这个a链接click的问题原因出现在href上，我只是清空了里面的内容，需要删除该属性，或者将值改为href="javascript:;"，
解析参照：https://www.cnblogs.com/fairy62/p/9486979.html
自己换成router-link实现路由切换，可以正常切换。另外要在router-link上使用click方法切换路由，而不使用to属性，需要使用native修饰符。@clike.native
但是还有一个问题就是我加了一个样式，给router-link，想让激活的link带背景色。我这种写法两个都有这个样式
.router-link-active {
background: #848484;
}
效果如下：
于是我又弃用click了，直接使用to属性才没有问题。
