vue+element导航栏⾼亮显⽰的解决⽅式
⽤导航菜单时遇到的⼀些问题：
问题1：
页⾯强制刷新，按F5时，页⾯如果没有好好设置的话，导航栏默认叠起来，⽽且⽆⾼亮显⽰；刷新后导航栏显⽰和之前不⼀致，如图所⽰
解决：
html关键代码设置 :default-active="defaultUrl"
这⼉的原理就是defaultUrl跟#/后⾯的⼀致，也就是说跟router.js中的path⼀致才⾏（router.js见后⽂）
window.location.href.split('/#')[1] 获取的是"localhost:8080/#/search-contact/1"中的"/search-contact/1"
这样设置后，⽆论如何刷新页⾯，页⾯都会⾼亮显⽰当前url
问题2：
点击浏览器前进后退按钮导致⾼亮显⽰不同步，
解决问题关键，和问题⼀原理⼀样，当路由变化时，改变默认显⽰⾼亮的值
//监听路由变化
watch: {
'$route':'getPath'
},
methods: {
getPath(){
this.defaultUrl = this.$route.path;
}
},
补充：
以上，div和js⽂件在设置菜单栏的menu.vue⽂件下。
router.js⾥⾯这样设置
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
import Home from './views/home';
import SearchProperty from './views/search/search-property';
import SearchListing from './views/search/search-listing';
import SearchContact from './views/search/search-contact';
import SearchSchool from './views/search/search-school';
js导航栏下拉菜单export default new Router({
routes: [
{name: 'home', path: '/', component: Home},
{name: 'search-property', path: '/search-property/:pageNum', component: SearchProperty},
{name: 'search-contact', path: '/search-contact/:pageNum', component: SearchContact},
{name: 'search-listing', path: '/search-listing/:pageNum', component: SearchListing},
{name: 'search-school', path: '/search-school/:pageNum', component: SearchSchool},
],
});
补充：这是⽬前发现最简单的⼀种⽅法
<el-menu router :default-active="$route.path">
</el-menu>
以上这篇vue+element导航栏⾼亮显⽰的解决⽅式就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。