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

Posted 2023-02-23

【中文标题】如何使用与普通路由不同的模板处理 vue-router 的 404 错误

【英文标题】：How to handle 404 error with vue-router using different templates than normal routes

【发布时间】：2018-12-14 13:45:03

【问题描述】：

您好，我有两个模板：

主站点模板，用于两侧有两条横线的普通页面：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 路由中，但这会显示两个侧边栏。

【问题讨论】：

how to create a 404 component in vuejs using vue-router的可能重复

情况不同，因为不需要在该帖子上使用不同的模板。但没关系，我发现让它工作的唯一方法是

【参考方案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 错误将在没有任何侧边栏或导航栏的情况下加载。您可以将所有主要内容页面封装在您想要的任何外部布局中，您所要做的就是指定在元标记中使用哪个模板。