关于vue项目中公共头的引用问题

Question

我在写一个项目的时候，一开始是将Header和Footer写在各个视图页文件里，如home.vue中

但后面发现，这样写会很繁琐，因为有很多的视图文件，如果每个都要这样添加的话，项目中重复的代码会很多，而且想统一管理也会很麻烦，于是我想将Header和Footer写在app.vue页面中如图

这样虽然解决了重复代码的问题，但我的Header中有一个登录和注销的功能，逻辑上是打开项目时在默认页进行判断是否有cookie值（loginName），如果没有，则跳转到/login页，并且Header中右侧的用户名和注销按钮所在的div会进行隐藏，如图（这是登录之后的页面）

这是注销之后跳转到的/login页

理想情况如上，但现在存在一个问题，当我点击注销之后，虽然可以进行跳转，但右上角的用户还保留在原位，似乎是缓存，我必须刷新之后才会消失，如图

所以想请教大佬解决一下这个问题，多谢多谢！

Answer 1

你点击注销/退出以后的逻辑是怎么样的？
单从描述来看，点击退出以后只更改了路由页面，也就是<router-view>,没有控制好header的显示与否
另外header一般用自定义组件，用户登录的状态一般用状态管理vuex来做，然后用router的钩子函数来控制页面跳转
给你一个项目的参考：
https://github.com/iview/ivie...

Answer 2

你跳转的只是视图中的中间部分，header和footer并没有变化，注销后可以重置flag或者区分登录和内容两个页面

Answer 3

看了你的 quit 方法，清除了 cookie 信息，路由也进行了跳转 但是你将检查 cookie 的操作放在了 moutend 里面，这样会造成只会在页面加载的时候去检查 cookie 只执行一次。也就是你说的刷新之后才会正确
提供两个修改思路：

• 确定删除 cookie 之后手动定义一次 username 和 loginOrpersonalSpaceUrl,相当于初始化
• 将 moutend 里面的逻辑判断添加到计算属性中或者改成一个方法

Answer 4

一般情况下，login页面单独写，不加入header，或者你用v-if隐藏掉，然后再调整样式。