Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

I want to ask about vue-router. This is my first time using vue js.

Initially I was on the route:

localhost: 8080 / article / edit-article / 2

and when I move to route:

localhost: 8080 / page

this is still running.

But when I moved from:

localhost: 8080 / article / edit-article / 2

locahost: 8080 / dashboard

the route instead changed to:

localhost: 8080 / article / edit-article / dashboard

localhost: 8080 / dashboard

This my vue-router:

export default new Router({
  mode: 'history',
  linkActiveClass: 'open active',
  scrollBehavior: () => ({ y: 0 }),
  routes: [
      path: '/',
      redirect: '/login',
      name: 'Home',
      component: DefaultContainer,
      children: [
          path: 'dashboard',
          name: 'Dashboard',
          component: Dashboard,
          meta: {
            requiresAuth: true
          path: 'page',
          name: 'Page',
          component: Page,
          meta: {
            requiresAuth: true
      path: '/article',
      component: DefaultContainer,
      meta: {
        requiresAuth: true
      children: [
          path: '',
          name: 'List Articles',
          component: Article,
          meta: {
            requiresAuth: true
          path: 'add-article',
          name: 'Add Article',
          component: AddArticle,
          meta: {
            requiresAuth: true
          path: 'edit-article/:id',
          name: 'Edit Article',
          component: EditArticle,
          meta: {
            requiresAuth: true
      path: '/login',
      name: 'Login',
      component: Login,
      meta: {
        requiresVisitor: true
I use navbar with js, like this:
export default {
  items: [
      name: 'Dashboard',
      url: 'dashboard',
      icon: 'icon-speedometer',
      name: 'Article',
      url: 'article',
      icon: 'icon-note'
      name: 'Page',
      url: '/page',
      icon: 'icon-layers'
and this my DefaultContainer:
<template>   
<div class="app">
    <AppHeader fixed>
      <SidebarToggler class="d-lg-none" display="md" mobile />
      <b-link class="navbar-brand" to="/dashboard">
        <img class="navbar-brand-full" src="img/brand/logo.svg" width="89" height="25">
        <img class="navbar-brand-minimized" src="img/brand/sygnet.svg" width="30" height="30>
      </b-link>
      <SidebarToggler class="d-md-down-none" display="lg" />
      <b-navbar-nav class="ml-auto">
        <DefaultHeaderDropdownAccnt/>
      </b-navbar-nav>
    </AppHeader>
    <div class="app-body">
      <AppSidebar fixed>
        <SidebarHeader/>
        <SidebarForm/>
        <SidebarNav :navItems="nav"></SidebarNav>
        <SidebarFooter/>
        <SidebarMinimizer/>
      </AppSidebar>
      <main class="main">
        <Breadcrumb :list="list"/>
        <div class="container-fluid">
          <router-view></router-view>
      </main>
      <AppAside fixed>
        <!--aside-->
        <DefaultAside/>
      </AppAside>
    <TheFooter>
      <!--footer-->
        <span class="ml-1">&copy; 2019 local Incorporation. All Rights Reserved</span>
    </TheFooter>   
</template>
<script> 
import nav from '@/_nav' 
import { Header as AppHeader, SidebarToggler,` `Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Footer as TheFooter, Breadcrumb } from '@coreui/vue' 
import DefaultAside from './DefaultAside' 
import DefaultHeaderDropdown from './DefaultHeaderDropdown'`
export default {
  name: 'DefaultContainer',
  components: {
    AsideToggler,
    AppHeader,
    AppSidebar,
    AppAside,
    TheFooter,
    Breadcrumb,
    DefaultAside,
    DefaultHeaderDropdown,
    SidebarForm,
    SidebarFooter,
    SidebarToggler,
    SidebarHeader,
    SidebarNav,
    SidebarMinimizer
  data () {
    return {
      nav: nav.items
  computed: {
    name () {
      return this.$route.name
    list () {
      return this.$route.matched.filter((route) => route.name || route.meta.label )
</script>
Thanks all
                How did you move from localhost:8080/article/edit-article/2 to locahost:8080/dashboard? Was it via JS code or a router-link? Could you include that code. It sounds like you've just got a relative path problem.
– skirtle
                Nov 22, 2019 at 4:45
                That isn't what I meant. The code in the question is just your router config. That tells us what pages exist but it doesn't show how you are moving from one page to another. We need to see the code you're using to navigate between the routes. It might involve a <router-link> tag in your template. Or perhaps you're using the JavaScript API, e.g. router.push(...)?
– skirtle
                Nov 22, 2019 at 5:05
This would appear to be a relative path. So if you are currently on the page http://localhost:8080/article/edit-article/2 it will resolve relative to that URL, giving http://localhost:8080/article/edit-article/dashboard. This isn't really anything to do with Vue router, it's just how relative URLs are resolved. You'd get exactly the same behaviour if you used an HTML link such as <a href="dashboard">.
If you start your relative URL with a / then it will omit the rest of the path:
url: '/dashboard',
This should fix your problem. This is what you've done with your /page URL, which is presumably why that works.
Personally I would use named routes instead, rather than trying to craft relative URLs. See https://router.vuejs.org/guide/essentials/named-routes.html
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.