Why does Vue router regex trigger on all paths?

Question

I am using VueJS2, and having some trouble with the router.

My routes are set up as follows:

import TypeoneSignup from "../components/typeone-signup";
import TypetwoSignup from "../components/typetwo-signup";
import SomeSecretPath from "../components/some-secret-path";
import RegisterSecretRecord from "../components/register-secret-record";
import RegisteredSuccess from "../components/registered-success";
import ErrorView from "../components/error-view";
import FourOhFour from "../components/four-oh-four";
import TargetPage from "../components/targetpage-redirect";

export const routes = [
    {
        name: 'Ttypeone-signup',
        path: '/signup-typeone',
        component: TypeoneSignup
    },
    {
        name: 'typetwo-signup',
        path: '/signup-typetwo',
        component: TypetwoSignup
    },
    {
        name: 'some-secret-path',    
        path: '/some-secret-path/:token',
        component: SomeSecretPath,
        props: (route) => ({ token: route.params.token })
    },
   {
       name: 'registered-success',
       path: '/success',
       component: RegisteredSuccess
   },
   {
       name: 'error',
       path: '/error',
       component: ErrorView
   },
   {
       name: 'register-secret-record',
       path: '/register-secret-record/:token',
       component: RegistersecretRecord,
       props: (route) => ({ token: route.params.token })
   },
   {
       name: '404',
       path: '/404',
       component: FourOhFour
   },
   {
       name: 'targetpage',
       path: '(/?)$',
       component: TargetPage
   },
    {
     path: '*',
     redirect: '404'
   }
];

What I'm trying to achieve is whenever a user enters mydomain.com or mydomain.com/, they should be redirected to myotherdomain.com. That's what the targetpage-redirect does.

The user should however not be redirected if he enters mydomain.com/anypath, since there are specific paths that they need to access at certain times. Effectively im trying to set up a "front page" style redirect.

The issue however is, that the TargetPage seems to "trigger" on any and all urls/paths that are used.

I've tried verifying it with the Express route tester, and it says that it should correctly only trigger on paths that contain one or no slashes, and then ends.

So what causes the redirect from all other paths?

Edit: So, having looked around and haphazardly commenting out pieces of code, it seems that there is not an issue with the regex itself, but rather the

import TargetPage from "../components/targetpage-redirect";

part that somehow forces the script in the page to be run. My targetpage-redirect looks as follows:

<template>

</template>
<script>
    window.location.replace("https://myotherdomain.com");

</script>

Can it really be true that a page like that cannot be imported without executing the script, or am I completely misunderstanding something.

soju · Accepted Answer · 2018-09-05 14:53:17Z

1

You don't need to use a dummy component for this, you should simply use beforeEnter :

{
    path: '(/?)$',
    beforeEnter(to, from, next) {
        window.location = 'https://myotherdomain.com'
    }
}

Read more : https://router.vuejs.org/guide/advanced/navigation-guards.html

answered Sep 5, 2018 at 14:53

soju

25.4k3 gold badges70 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ZestyRice Over a year ago

I did not know that this was called navigation guards. Thank you very much. Also seemed the regex wasn't needed/didn't work in practice, and could be replaced with just a single /

Collectives™ on Stack Overflow

Why does Vue router regex trigger on all paths?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related