javascript - VueJS: Automatically Redirect on Page Load - Stack Overflow

admin管理员组

文章数量:1334206

I have a Vue application and when a user visits a specific page, I want to auto-redirect to an external page. I am not sure how to do that.

For example:

http://localhost:3000/redirecting/?link=

1. I know how to read the link parameter from the URL. So, I'll get this.
2. Then I have user auth data in state and I can get it in puted properties.
3. Now, based on the user object I can determine if the user is logged in or not.
4. If he is not logged in, redirect to the login page. If user is logged in, redirect to the external link (This is the problem area).

Note that there is no click or anything. As soon as a user visits this page, the redirect should happen. Even better if we can show a message 'Redirecting...' for a second.

Update: I am using Nuxt/Vue.

I have a Vue application and when a user visits a specific page, I want to auto-redirect to an external page. I am not sure how to do that.

For example:

http://localhost:3000/redirecting/?link=http://externalsite.

1. I know how to read the link parameter from the URL. So, I'll get this.
2. Then I have user auth data in state and I can get it in puted properties.
3. Now, based on the user object I can determine if the user is logged in or not.
4. If he is not logged in, redirect to the login page. If user is logged in, redirect to the external link (This is the problem area).

Note that there is no click or anything. As soon as a user visits this page, the redirect should happen. Even better if we can show a message 'Redirecting...' for a second.

Update: I am using Nuxt/Vue.

• javascript
• vue.js
• vuejs2

Share Follow edited Sep 7, 2018 at 4:21 asanas asked Sep 7, 2018 at 3:46 asanasasanas 4,2801515 gold badges5252 silver badges8282 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

The custom routing inNuxt also worked. But I went with the following method. This also helped me sow the 'Redirecting...' message for a second before redirecting.

<template>
<div>
  <p>Redirecting...</p>
</div>
</template>

<script>
export default {
  mounted () {
    const user = this.$store.state.auth.user
    if (user !== null) {
      if (this.$route.query.link) {
        window.location.href = this.$route.query.link
      } else {
        window.location.href = '' // Some default link
      }
    } else {
      window.location.href = '' // login page
    }
  }
}
</script>

you can do with Navigation Guards . you don't need to you any view file. just use route file

const router = new VueRouter({
  routes: [
{
  path: '/foo',
  ponent: Foo,

  beforeEnter: (to, from, next) => {
    // check link param exit using route param method
     if (link exit) {
          //  window.location.href =   add redirtect url
      } else {
        next()
      }
  }
}
 ]
})

You will have to execute the check immediately after the page has loaded. Now, whatever your login algorithm maybe, you should definitely have a way to access this status on the front end somehow.

function getLoginStatus(){
     //do something, get login status from server whatsoever

     return status; //boolean
}

function redirect(){
    const url = window.location.search.split("?link=")[1];
    const externalurl = 'https://foo.';
    //get url, parse, etc etc

    //check login status
    if(getLoginStatus()){
         window.location.href = externalurl;
    }
    else {
         window.location.href = 'login.html';
    }
}

window.onload = function(){
    redirect();
}

Now all you have to do is organize this so that it fits your vue code or whatever code structure you are employing. You can use route or something. I myself wouldn't even use Vue to handle this since this has nothing to do with the user interface.

本文标签： javascriptVueJS Automatically Redirect on Page LoadStack Overflow