CODEWITHSUNDEEP
javascriptregexvuejs2
ZestyRice
ZestyRice

Reputation: 33

Why does Vue router regex trigger on all paths?

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.

Upvotes: 1

Views: 508

Answers (1)

soju
soju

Reputation: 25312

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

Upvotes: 1

Related Questions