如何使用与普通路由不同的模板处理 vue-router 的 404 错误

Question

您好，我有两个模板：

• 主站点模板，用于两侧有两条横线的普通页面：Main.vue
• 错误页面模板，两侧没有错误栏，例如 404：404.vue 如果用户进入普通页面，则应使用Main.vue 模板，每个页面都有嵌套路由。 如果用户进入一个不存在的页面，则应该使用带有错误的404.vue 模板。 我尝试了以下操作，但它始终显示 404 错误，localhost:8080/ 除外（根路径访问）：

router.js：

export default new Router({
  mode: 'history',
  routes: [{
      path: '/',
      name: 'main',
      component: Main,
      childrens: [{
          path: '/',
          name: 'Home',
          components: {
            default: () =>
              import ('@/views/Home'),
            leftInfo: () =>
              import ('@/views/DashboardAdditionalInfo'),
            rightInfo: () =>
              import ('@/components/common/MyTicketsList')
          }
        },
        {
          path: 'dashboard',
          name: 'Dashboard',
          components: {
            default: () =>
              import ('@/views/Dashboard'),
            leftInfo: () =>
              import ('@/views/DashboardAdditionalInfo'),
            rightInfo: () =>
              import ('@/components/common/MyTicketsList')
          }
        }

      ]
    },

    {
      path: '*',
      name: '404',
      component: () =>
        import ('@/templates/404.vue')
    }
  ]
})

关于如何处理这种情况的任何想法？当然，我可以将 404 句柄放在 Main 路由中，但这会显示两个侧边栏。

Answer 1

您可以使用shards ui vue template 中的动态布局方法。它基本上将您的应用程序级别 <router-view/> 包装在正确的布局组件中，具体取决于您在 router.js 中提供路由的可选元标记。

App.vue：

<template>
  <div id="app">
    <component :is="layout">
      <router-view/>
    </component>
  </div>
</template>

<script>
export default {
    name: 'app',
    computed: {
      layout() {
        // none-layout will be used if the meta.layout tag is not set
        // computed may not be best place in vue lifecycle for this but it works ok
        return `${this.$route.meta.layout || 'none'}-layout`;
      }
    }
}
</script>

router.js：

import Vue from "vue";
import Router from "vue-router";
import Errors from "./views/Errors.vue";
Vue.use(Router);

export default new Router({
    mode: 'history',
    routes: [
        {
            path: "/",
            name: "dash",
            component: () => import('./views/Dashboard.vue'),
            meta: { layout: 'default-dash' }
        },
        {
            path: '/signup',
            component: () => import('./views/Signup.vue'),
            // meta.layout tag not present so 'none' will be used
        },
        {
            path: '*',
            component: Errors,
            meta: { layout: 'none' }
        }
    ]
});

main.js：

import Vue from 'vue'
import App from './App.vue'
import router from "./router";

// Layouts
import DefaultDash from '@/layouts/DefaultDash.vue';
import None from '@/layouts/None.vue';

// Layouts as usable components
Vue.component('default-dash-layout', DefaultDash);
Vue.component('none-layout', None);

Vue.config.productionTip = false

new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

DefaultDash.vue：

<template>
    <div>
        <NavBar/>
        <SideBar/>
        <slot/>
    </div>
</template>

<script>
import NavBar from "../components/NavBar";
import SideBar from "../components/SideBar";

export default {
  name: "default-dash",
  components: { NavBar, SideBar }
};
</script>

无.vue：

<template>
    <div>
        <slot/>
    </div>
</template>

<script>
export default {
  name: "none"
};
</script>

现在您的 vue 404 错误将在没有任何侧边栏或导航栏的情况下加载。您可以将所有主要内容页面封装在您想要的任何外部布局中，您所要做的就是指定在元标记中使用哪个模板。