[Vuejs]-Going back to previously working component gives white page

by

2👍

✅

You haven’t specified a route for welcome, only for /.

So why should <router-link to="welcome"> do anything?

Here’s a couple tips:

-Use either a redirect or an alias to fix your welcome routing problem. https://router.vuejs.org/en/essentials/redirect-and-alias.html.

I recommend an alias.

An alias of /a as /b means when the user visits /b, the URL remains
/b, but it will be matched as if the user is visiting /a.

{
  path: '/',
  name: 'welcome',
  component: Settings,
  alias: '/welcome'
}

-Use absolute paths instead of relative paths in your <router-links>

<router-link to="/newmails">

Reason being, if you’re in a nested route like /welcome/home/dad and you click <router-link to="newmails">, it will route to /welcome/home/newmails instead of /newmails

-Lastly, if you’re using vue-router and you ever see <div id="app"><!----></div>, it’s most likely an unmatched route.

👤Eric Guan

2👍

You can indeed use named routes, but the syntax is different (note the colon before to). 

<router-link :to="{ name: 'welcome'}">Welcome</router-link>

Ref: Vue Named Routes

👤Richard Matsen

Leave a comment