How does vue solve the problem of refresh failure after addRoutes dynamically adds routes?

This article mainly introduces how vue solves the problem of refresh failure after addRoutes dynamically adds routes. It has a certain reference value. Now I share it with you. Friends in need can refer to it

Preface

In some scenarios, we need to use addRoutes to dynamically add routes, but they will become invalid after refreshing. I happened to encounter this application scenario in the project some time ago, so I took the time to study it, share and record it. Please correct me if I am wrong.
Application scenario: User A logs in to the system, and there is a button on the page. After clicking, the route will be dynamically added and jump . After jumping, the user will also refresh Stay on the current page. If you don’t click this button and enter the address in the browser, the user will jump to the 404 page

github:https://github.com/Mrblackant...
View online :http://an888.net/router/keepR...

Idea

1. The user clicks the button and uses addRutes to dynamically add routes and jump Transfer and save the route;
2. When the user refreshes the newly jumped page, use beforeEach to intercept and judge. If it is found that the route has been saved before, and it is judged that the new page is just a refresh event, then add the previously saved route Come in;

Code

1. Click the button, save the route and jump

(1). Declare one in router/index.js Array, which contains some fixed routes, such as your login page, 404, etc.

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

(2). Click the button to jump and save the route;
Note that saving the route Steps need to be entered into the component to be jumped to. This is to prevent an infinite loop in the beforeEach interception.
Adding routing requires two points, one is the path, and the other is the component. You can encapsulate it into a method. , it will be simpler when you look at it, I won’t do it here
Remember to use the concat method to connect, fixed routes and dynamically added routes, so that the browser can return normally when it rolls back

//点击跳转
<template>
  <p>
    点击新增 动态路由: "secondRouter"
    <br>
    <el-button>新增动态路由</el-button>

  </p>
</template>

<script>
import router from &#39;vue-router&#39;
import {constantRouterMap} from &#39;@/router&#39;


export default {
  name: &#39;kk&#39;,
  mounted(){
  },
  data () {
    return {
      msg: &#39;Welcome to Your Vue.js App&#39;
    }
  },
  methods:{
    srouter(){
      let newRoutes=constantRouterMap.concat([{path:&#39;/secondRouter&#39;,
        component :resolve => require(["@/components/kk"], resolve )
      }])
      this.$router.addRoutes(newRoutes)
      this.$router.push({path:&#39;/secondRouter&#39;})
    }
  }
}
</script>

//跳转过去的component组件,xxx.vue
<template>
  <p>
    恭喜你，动态添加路由成功，浏览器的链接已经变化；

    </p>
<h3 id="无论你怎么刷新我都会留在当前页面">无论你怎么刷新我都会留在当前页面</h3>
    <h3 id="并且点击浏览器回退键-我会跳到之前页面-不会循环">并且点击浏览器回退键，我会跳到之前页面,不会循环</h3>

  
</template>

<script>
import router2 from &#39;@/router&#39;
import router from &#39;vue-router&#39;
export default {
  name: &#39;HelloWorld&#39;,
  mounted(){
      localStorage.setItem(&#39;new&#39;,JSON.stringify({&#39;path&#39;:&#39;/secondRouter&#39;,&#39;component&#39;:&#39;kk&#39;}))//保存路由
  },
  data () {
    return {
      msg: &#39;Welcome to Your Vue.js App&#39;
    }
  },
  methods:{
  }
}
</script>

2. Route interception beforeEach

When intercepting here, it will be judged whether there is a new dynamic route saved in localStorage. If so, it will be judged and logically processed. After the processing is completed, Clear the saved routes to prevent entering an infinite loop.
After entering the first level of judgment, you need to judge again whether it is a page refresh event

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:At first I thought that the route jump 404 cannot be matched and must be intercepted Process it here, but later found that it is not necessary at all. Just add the following two paragraphs when registering the route:

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

The overall idea is probably like this, mainly using beforeEach to intercept the data storage of localStorage, and it can be completed. , addRoutes dynamically adds the route refresh function without invalidation.
Please correct me for any shortcomings

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

vue router: dynamic route matching dynamic route matching

Use mixin to write plug-ins for self-made vue component communication plug-ins

The above is the detailed content of How does vue solve the problem of refresh failure after addRoutes dynamically adds routes?. For more information, please follow other related articles on the PHP Chinese website!