Question

我想问一下vue-router。这是我第一次使用vue js。

最初我在这条路线上：

本地主机：8080 /文章/编辑文章/ 2

当我走路线时：

本地主机：8080 /页

它仍在运行。

但是当我离开：

本地主机：8080 /文章/编辑文章/ 2

收件人：

本地主机：8080 /仪表板

路线改为：

本地主机：8080 /文章/编辑文章/仪表板

不是：

本地主机：8080 /仪表板

这是我的Vue路由器：

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
      }
    },
  ]
})

我将Navbar与js结合使用，

export default {
  items: [
    {
      name: 'Dashboard',
      url: 'dashboard',
      icon: 'icon-speedometer',
    },
    {
      name: 'Article',
      url: 'article',
      icon: 'icon-note'
    },
    {
      name: 'Page',
      url: '/page',
      icon: 'icon-layers'
    },   
  ]
}

这是我的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>
        </div>
      </main>
      <AppAside fixed>
        <!--aside-->
        <DefaultAside/>
      </AppAside>
    </div>
    <TheFooter>
      <!--footer-->
      <div>
        <span class="ml-1">&copy; 2019 local Incorporation. All Rights Reserved</span>
      </div>
    </TheFooter>   
</div> 
</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>

谢谢

Answer 1

问题似乎出在这里：

url: 'dashboard',

这似乎是相对路径。因此，如果您当前在页面http://localhost:8080/article/edit-article/2上，它将相对于该URL进行解析，并给出http://localhost:8080/article/edit-article/dashboard。这实际上与Vue路由器无关，而只是解析相对URL的方式。如果使用诸如<a href="dashboard">之类的HTML链接，您将获得完全相同的行为。

如果您以/开头相对网址，则它将忽略其余路径：

url: '/dashboard',

这应该可以解决您的问题。这就是您使用/page URL所做的事情，这大概就是为什么它能起作用的原因。

我个人将使用命名路由代替，而不是尝试制作相对URL。参见https://router.vuejs.org/guide/essentials/named-routes.html

route.params具有与动态网址不匹配的属性

1 个答案: