route.params 具有与动态 url 不匹配的属性答案

【问题标题】：route.params has properties that don't match dynamic urlroute.params 具有与动态 url 不匹配的属性
【发布时间】：2020-03-18 03:12:53
【问题描述】：

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

一开始我在路上：

localhost:8080/article/edit-article/2

当我移动到路线时：

本地主机：8080/页

这仍在运行。

但是当我搬家时：

localhost:8080/article/edit-article/2

到：

本地主机：8080 / 仪表板

路线改为：

本地主机：8080/article/edit-article/dashboard

不是：

本地主机：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
      }
    },
  ]
})

我在 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>

谢谢大家

【问题讨论】：

您是如何从localhost:8080/article/edit-article/2 移动到locahost:8080/dashboard 的？是通过 JS 代码还是router-link？你能包括那个代码吗？听起来您刚刚遇到了相对路径问题。
在vue路由器中使用js代码
我不是这个意思。问题中的代码只是您的路由器配置。这告诉我们存在哪些页面，但它没有显示您如何从一个页面移动到另一个页面。我们需要查看您用于在路线之间导航的代码。它可能涉及模板中的<router-link> 标记。或者您可能正在使用 JavaScript API，例如router.push(...)?
是的，如果要编辑文章，我会在文章表中使用 router.push

标签： vue.js vuejs2 vue-router

【解决方案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 以 / 开头，那么它将省略路径的其余部分：

url: '/dashboard',

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

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

【讨论】：