Vue 2/VueRouter：在子路由上无法刷新页面答案

【问题标题】：Vue 2/VueRouter : can't refresh page when on children routesVue 2/VueRouter：在子路由上无法刷新页面
【发布时间】：2017-01-06 11:28:11
【问题描述】：

我无法弄清楚当我在子路线上导航时发生了什么（在上面的示例中 http://<mydomain>/applis），然后刷新页面 => 我有一个

未找到 // 在此服务器上未找到请求的 URL /applis

import MyComponentView from './components/MyComponent.vue'
import LoginView from './components/Login.vue'
import NotFoundView from './components/404.vue'
import DashboardView from './components/subcomp1/Dashboard.vue'
import ApplisView from './components/subcomp1/Applis.vue'

const routes = [
  {
    path: '/login',
    component: LoginView
  }, {
    path: '/',
    component: MyComponentView,
    children: [
      {
        path: '',
        component: DashboardView,
        name: 'Dashboard',
        description: 'Overview of environment'
      }, {
        path: '/applis',
        component: ApplisView,
        name: 'Applis',
        description: 'Applications list'
      }
    ]
  }, {
    path: '/*',
    component: NotFoundView
  }
]
export default routes

可能我还没有理解子路由的基本概念？

【问题讨论】：

标签： routes vuejs2 vue.js

【解决方案1】：

在您的情况下似乎有问题的是，当您已经有 /login 路由时，父路由带有 /。这也是/ 的孩子。正如documentation 所说：

以 / 开头的嵌套路径将被视为根路径。这允许您利用组件嵌套，而无需使用嵌套 URL。

您可以查看示例 here 以了解如何使用嵌套路由。此链接的示例代码：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        // UserHome will be rendered inside User's <router-view>
        // when /user/:id is matched
        { path: '', component: UserHome },

        // UserProfile will be rendered inside User's <router-view>
        // when /user/:id/profile is matched
        { path: 'profile', component: UserProfile },

        // UserPosts will be rendered inside User's <router-view>
        // when /user/:id/posts is matched
        { path: 'posts', component: UserPosts }
      ]
    }
  ]
})

如果您可以为您的更改创建一个小提琴，这将有助于提供准确的修复。

【讨论】：