解决vue路由后界面没有变化,但是链接有的问题

Vue是一款被广泛应用的前端框架，而vue-router则是Vue的路由管理插件。Vue-router可以方便地管理不同页面之间的跳转，并且可以按需加载所需组件，提高网站性能。

然而，在使用vue-router的过程中，有时我们会遇到页面跳转没有变化，但链接已经正确跳转，这个问题很影响用户体验。下面我将为大家分享一下解决vue路由后界面没有变化但链接有的问题。

1. 确认路由跳转路径是否正确

首先，我们需要确认路由跳转路径是否正确，即在路由配置文件中设置的路径是否和组件的路由地址匹配。如果路径设置错误，则会导致页面跳转没有变化，但链接已经正确跳转的问题。

可以在控制台输出当前路由信息，检查当前路由路径是否正确。如下代码：

console.log(this.$route.path);

2. 使用router-link标签进行跳转

使用router-link标签可以更方便地进行页面跳转，并且可以自动设置正确的路径。在router-link中，应该通过to属性来指定跳转路径。

如下代码：

<router-link to="/home">Home</router-link>

3. 将vue-router的mode设置为history模式

Vue-router默认使用hash模式进行路由跳转，即在URL中加上一个#符号。但是，部分浏览器可能会阻止通过JS进行hash跳转，导致页面跳转没有变化，但链接已经正确跳转的问题。

解决方法是将vue-router的mode设置为history模式，这样可以避免使用hash符号进行路由跳转。在router配置中进行如下设置：

const router = new VueRouter({

  mode: 'history',

  routes: [...]

})

4. 使用v-if或v-show控制组件显示

有时，可能会出现因为使用if语句控制组件显示而导致页面跳转没有变化的问题。这是因为，当if语句为false时，组件虽然已经渲染到了页面上，但是它的样式和内容都被隐藏。

解决方法是使用v-if或v-show控制组件的显示和隐藏，并添加transition动画效果，以提高用户体验。

总结

通过以上四个方法，可以解决Vue路由后界面没有变化但链接有的问题。我们应该注意路由跳转路径是否正确，使用router-link标签进行跳转，将vue-router的mode设置为history模式以及避免使用if语句控制组件显示导致的问题。更好地理解路由跳转，可以通过对Vue-router的源码进行分析学习。