vue中使用addRoutes动态添加路由后刷新失效如何解决

vue中使用addRoutes动态添加路由后刷新失效如何解决，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名注册、网站空间、营销软件、网站建设、乐安网站维护、网站推广。

1.按钮点击，保存路由并跳转

(1).在router/index.js里声明一个数组，里边是一些固定的路由，比如你的登录页面、404等等

//router/index.js
export const constantRouterMap=[
  {
   path: '/',
   // name: 'HelloWorld',
   component: HelloWorld
  }
 ]
Vue.use(Router)
export default new Router({
 routes: constantRouterMap
})

(2).按钮点击，跳转、保存路由;

注意，保存路由这一步骤，要做进要跳转到的组件里,这是为了防止在beforeEach拦截这边产生死循环

添加路由需要两点，一是path，二是component,你可以封装成方法，看着就会简洁一点，我这里就不做了

记得要用concat方法连接，固定的路由和动态新加的路由,这样浏览器回退的时候也能正常返回

//点击跳转




//跳转过去的component组件,xxx.vue

2.路由拦截beforeEach

这里拦截的时候，就判断localStorage里边有没有保存新的动态路由，如果有，就进行判断，逻辑处理，处理完之后就把保存的路由清除掉，防止进入死循环。

进入第一层判断后，需要再次判断一下是不是页面的刷新事件

import router from './router'
import { constantRouterMap } from '@/router' //router里的固定路由
router.beforeEach((to, from, next) => {
 if (localStorage.getItem('new')) {
  var c = JSON.parse(localStorage.getItem('new')),
  lastUrl=getLastUrl(window.location.href,'/');

  if (c.path==lastUrl) { //动态路由页面的刷新事件
   let newRoutes = constantRouterMap.concat([{
    path: c.path,
    component: resolve => require(["@/components/" + c.component + ""], resolve)
   }])
   localStorage.removeItem('new')
   router.addRoutes(newRoutes)
   router.replace(c.path) //replace,保证浏览器回退的时候能直接返回到上个页面，不会叠加

  } 
 } 
 next()

})

var getLastUrl=(str,yourStr)=>str.slice(str.lastIndexOf(yourStr))//取到浏览器出现网址的最后"/"出现的后边的字符

ps:一开始我还以为匹配不到路由跳转404要在拦截这里处理，后来发现根本不用，直接在注册路由的时候加上下边两段就行了：

export const constantRouterMap = [{
  path: '/',
  component: HelloWorld
 }, 
 {//404
  path: '/404',
  component: ErrPage
 },
 { //重定向到404
   path: '*', redirect: '/404' }
]

看完上述内容，你们掌握vue中使用addRoutes动态添加路由后刷新失效如何解决的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！