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方法连接,固定的路由和动态新加的路由,这样浏览器回退的时候也能正常返回
//点击跳转点击新增 动态路由: "secondRouter"//跳转过去的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动态添加路由后刷新失效如何解决的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
当前题目:vue中使用addRoutes动态添加路由后刷新失效如何解决
地址分享:http://myzitong.com/article/pdjgjs.html