About the failure of vueRouter next ('/') - Codes Helper - Programming Question Answer

About the failure of vueRouter next ('/')

problem description

wrote a demo of vue-router and wanted to implement:

enter the page and first redirect to / index and then there is a < router-link to= "/ login" > to login < / router-link > Click to jump to the / login page;
but I wrote in the global guard that when to.paht ="/ login" , I skip to the front page via next ("/") ;
normally, it will be skipped to the front page and should not go to the / login page;
but now you can enter, and when you use http://localhost:8080/-sharp/login, the second time you type a link in the address bar, you will automatically jump to / index but once and still enter / login ;

related codes

router.js routing

{
    path: "/",
    redirect: "/index"
  },
  {
    path: "/index",
    name: "index",
    component: Index
  },
  {
    path: "/login",
    name: "login",
    component: Login
  },
  {
    path: "/404",
    name: "404",
    component: PageError
  },
  {
    path: "*",
    redirect: "/404"
  }

Global Guard in main.js

router.beforeEach((to, form, next) => {
  console.log("-beforeEach-", to.path)
  if (to.path === "/login") {
    console.log("-login-")
    next("/")
  }
  next()
}

data output by console

 -beforeEach- /index
 -beforeEach- /login
 -login-

in theory, the output of -login- should trigger next ("/") , and then enter the guard output -beforeEach- / and enter / index , but the guard is not actually triggered again.

the environmental background of the problems and what methods you have tried

try to change next ("/") to next ("/ a") then you can successfully enter the / 404 page;
but enter http://localhost:8080/-sharp/login via url to enter the / login page;
tries to find a rule, that is, when the path of the current page is the same as next ("/") , the jump will fail;

Vue-router vue.js javascript

Dec.28,2021

router.beforeEach((to, form, next) => {
  console.log('-beforeEach-', to.path);
  if (to.path === '/login') {
    console.log('-login-');
    next('/');
  } else {
    next();
  }
});

Change

to this, if you encounter '/ login' , you will execute next

twice.

Previous: How does mysql design tables for daily data records?

Next: How to write the two-tier popover of the mui framework?

< 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 sets the problem of global login blocking.
< H2 > how does vue-router invoke a component in the navigation guard? < H2 > login blocking on the official website is to jump to a fixed page, such as router.beforeEach((to, from, next) => { if (to.matched.some(res => res.meta.requireA...

Vue-router vue.js javascript

Mar.21,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

Menu