vue-element-template 使用心得

使用他的简略版的时候,当用到异步路由做权限的时候,可能会产生的路由问题:
1.刷新异步加入的路由页面的时候,页面会变成空白,产生的原因是路由丢失了,解决办法,就是每次都保存路径,在app.vue中
created() {
this.routeUpdate(this.KaTeX parse error: Expected 'EOF', got '}' at position 10: route) }̲, watch: { …route’: ‘routeUpdate’
},
methods: {
routeUpdate (to) {
if(to.name) {

  }
  this.loadRoutedInfo()
},
loadRoutedInfo() {
  //载页面加载时读取sessionStorage里的状态信息
  // try {
  //   // sessionStorage.getItem("routesInfo" && this.$store.commit('setRouterArray',JSON.parse(sessionStorage.getItem('routesInfo'))))
  //  sessionStorage.setItem('routesInfo')
  // } catch (e ) {

  // }
  window.addEventListener("beforeunload", () => {
    sessionStorage.setItem('pathName', window.location.pathname)//重点,暂存页面刷新的地址
  })
}

}
然后在路由守卫里面进行判断
const pathName = sessionStorage.getItem(‘pathName’)
if (pathName === to.path) {
next()
} else {
sessionStorage.setItem(‘pathName’, to.path)
next({ …to, replace: true })
}
还有一种情况就是进入后,点击异步的导航,出现空白页
mounted() {
window.addEventListener(‘hashchange’,()=> {
let currentPath = window.location.hash.slice(1)
if(this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …{ this.route.push(currentPath)
}
},false)
}

你可能感兴趣的:(vue-element-template 使用心得)