1. Demand interpretation

  1. The search page and the management platform page coexist. The search page does not need to be logged in, but the management platform must be logged in
  2. Retrieve details Use the details page under the Management Platform menu (login required)
  3. Retrieve details Return list of retrieved results Preserve list of retrieved results (using keep-alive)

2. Code implementation

  1. Login and no-login, route list set meta attribute

    RequiresAuth: {routes} True} // Can be added to the first level route, child routes also need to log in, login free can be set to false or not set, Then judge the router during route interception. BeforeEach ((to, from, Next) => {if (to.matched. Some (r => (r.mate.requiresauth))) { == 'undefined') {// not logged in next()} else {// not logged in target next({path: 'login', Query :{referUrl:encodeURI(to.fullpath)}} else {referUrl:encodeURI(to.fullpath)}} next()}} After processing the user information, If (this.$route.query&&this.$route.query. ReferUrl){this.$route.replace (this.$route.query)} Else {this.$router. Replace ('/search') // default page}Copy the code

  2. Preserve the search list results

    // routes add meta attribute path: '/search', name: 'search', meta:{keepAlive:true}, <router-view v-if="$route.meta. KeepAlive "/> </keep-alive> <keep-alive> <router-view v-if="! $route.meta. KeepAlive "/> </keep-alive> next) { if (from.name == "checkDetails" &&from.query.id) { to.meta.needReload = false; } else { to.meta.needReload = true; } next(); }, Check that the value of activated(){if(this.$route.meta. NeedReload){this.keywords=' this.ruleId=' this.tableData=[] this.pagination={ current:1, pageSize:10, total:0, } this.ruleList=[] this.getRuleClass() this.initStatistics() } },Copy the code

3. Potholes

  1. The reason is that the user information was not synchronized when promising. Then (()=>{}) was returned after successful login, so the navigation guard intercepted the login again during the jump. As it was the login logic that someone else had packaged before, they didn’t dare to modify it. Settimeout is set to solve the problem