Vue-router sets the problem of global login blocking.

< H2 > how does vue-router invoke a component in the navigation guard? < / H2 >

//  
router.beforeEach((to, from, next) => {
  if (to.matched.some(res => res.meta.requireAuth)) { // 
    if (judgingLogon()) { // 
      next()
    } else { // 
      next({
        path: "/login",
        query: { back: to.query }
      })
    }
  } else {
    next()
  }
})

this allows you to jump to the corresponding login page when you need to log in, but now the login box pops up when you click on a navigation that needs to be logged in, and the login box component has been written. The question is: how to control the data of this login component in beforeEach? That is, a login box pops up on all the pages that need to be logged in, and the login box can be triggered when the user clicks the [login] button.

Vue-router vue.js javascript

Mar.21,2021

then you can control it with vuex. The login component is introduced into app.vue, and if there is layout, it is introduced into layout

Previous: How to control the default display of one of the subcomponents in vue?

Next: Vuex mutations sets state stack overflow

< router-view > render blank < / router-view > without any error?
first contact with vue,vue-router < router-view > render blank < router-view > without any error prompt. Here is the code: App.vue <template> <div id="app"> <router-view>< router-view> < div> < tem...

Vue-router vue.js javascript

Mar.03,2021
Route snooping cannot be performed in Vue2.0 cli
vue routing cannot be monitored other routes can be monitored, but this is not allowed Tools_list.vue: addFriend.vue: ...

Vue-router vue.js javascript

Mar.04,2021
How does vuejs refresh the current route?
for example, how do I initialize this component when I click to bill successfully? Just go back to where you just came in? there are a lot of things here. I don t want to find the corresponding binding value and empty it. I thought of this way to ...

Vue-cli vue-router vue.js javascript

Mar.04,2021
Vue fixed head position, but now to do a separate landing page, solve?
as shown in the figure: the landing page needs to be displayed separately, and now it is all in the middle of the beginning and the end = router.js import Vue from vue import Router from vue-router import Index from .. components index...

Vue-router vue.js javascript

Mar.05,2021
Vue-router dynamic routing lazy loading slow local hot updates
because the project routes are all dynamically infected by the back end, the local route storage is not done, addRoute is dynamically mounted, and then lazy loading is used. how should I configure so that lazy loading is not used in the developme...

Vue-router vue.js javascript

Mar.05,2021
A strange problem of vue changing query parameters
the current route, such as search , I want to jump to search?p=1 . The first thought on the home page is to read this.$route.query , and then modify p to achieve the jump, but the following push methods in my project do not jump to the url I...

Vue-router vue.js javascript

Mar.06,2021
The question about vue-router
! [picture upload.] normally, the jump page should refresh the page, but why is the page jump between vue not refreshed? is there any way to refresh it, except for methods such as window.locaton ...

Vue-router vue.js javascript

Mar.06,2021
The vue router route has jumped, but the page has not changed
above app.js router.js index.vue menu.vue http: localhost:8080 -sharp index http: localhost:8080 -sharp menu Click the jump button, the route has jumped normally, but the page has not changed. Please give me some advice ...

Vue-router vue.js javascript

Mar.15,2021
How to access the new instance of vue in the secondary wrapper file of axios, and why the instance of vuex accessed is undefined
vuex: import axios from axios ; import ip, {token} from . ip ; import store from @ store ; console.log(store); storeundefined import Store from @ utils store ; cookie axios.defaults.withCredentials = false; axios .interceptor...

Node.js vuex vue-router vue.js javascript

Mar.18,2021
How does vue remove the extra characters from url?
item.url is the link returned by the background. It turns out that there is an extra " en " to get rid of this. The background does not have this " en " when the foreground is configured with routing, how can it be removed? ...

Vue-router vue.js javascript

Mar.20,2021
How to obtain the history record of spa application vue-router
now there is such a page jump order a-> b-> c , so I can go back to the a page directly $router.go (- 2) on the c page. if there are several page jumps in the middle, such as a-> e-> f-> c , then I need $router.go (- 3) to return to the a pa...

Vue-router vue.js javascript

Mar.20,2021
Vue router-link does not map the current route
nested routes used ...

Vue-router vue.js javascript

Mar.21,2021
Whether the large-scale system of writing PC with VUE is suitable to use SPA
A large recruitment system, involving many functions (including APP+ Mini Program + Wap+PC); is thinking of using one interface to provide data to multiple terminals. Mobile APP+wap+ Mini Program UI is basically the same (vue-cli can handle the interf...

Vue-router vue.js javascript vue-cli

Mar.24,2021
Redirect parameter transfer of vue-router
1. When vue-router does nested routing, you can already receive the value when you jump to the product page, but I want to jump to the default ProA. After redirect redirection, I can jump to the ProA page, but product can t get the value passed, for ex...

Vue-router vue.js javascript

Mar.28,2021
There is a problem with the vue-router jump page. Please see the detailed description.
vue-router,A page jumps to page B. Did not jump completely, is to append the content of the B page to the A page, what is the reason? A page <template> <div class="profile_page"> <header-top > <sec...

Vue-router vue.js javascript

Mar.31,2021
In vue-router history mode, the get request is not sent to the background
in order to avoid ugly URL, using history mode when using vue-router, the express, used at the back end is then configured with the following const history = require ( connect-history-api-fallback ); according to the official website. app.use (hist...

Express vue-router vue.js javascript

Mar.31,2021
How does the routing guard of vue-router jump to route?
I want to use vue-router s navigation guard to define a global guard to listen for changes in routing to implement a function that intercepts entry to the page, and then jumps to the login page but what I write is always wrong. I can t find a solut...

Front-end vue-router vue.js javascript

Apr.27,2021
The vue parameter passes the query string
vue project, I have an order (order) list page, the corresponding path is: test order all, and an order details page, corresponding path: test order detail?id=123456 want to dynamically route matching according to the order id, because there are strin...

Vue-router vue.js javascript

Apr.28,2021
Can vue-router implement pushstate mode for query to transfer parameters?
vue-router s route patterns hash and history, have their own disadvantages. but the route for history is http: a.com c d, , not http: a.com?c=d. how to do this or is there any plug-in that can do this? ...

Vue-router vue.js javascript

Apr.29,2021
VueRouter did not report an error, but the page was rendered blank
my index.js code import Vue from vue ; import App from . App.vue ; import VueRouter from vue-router ; import routers from . routers ; Vue.use(VueRouter); const router = new VueRouter({ routers }); let div = document.createElement( div ...

Vue-router vue.js javascript

May.22,2021