使用 Vue 和 Vue-router 创建一个多布局(layout)系统

原文地址：https://www.yaoin.net/blog/2019/09/30/%E4%BD%BF%E7%94%A8-vue-%E5%92%8C-vue-router-%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E5%A4%9A%E5%B8%83%E5%B1%80layout%E7%B3%BB%E7%BB%9F/

假设您创建了一个博客。您希望主页没有侧栏，而所有其他页面都有侧栏。

使用 vue-cli 3 创建一个项目：

vue create blog

创建 layouts 文件夹这 src。

创建有边栏的 Default 模版。

创建没有边栏的 NOSidebar 模版：

然后在 router.js 里创建页面：

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

import Home from './pages/Home'

import About from './pages/About'

const routes = [

    {

        path: '/',

        name: 'home',

        meta: {

            layout: 'no-sidebar'

        },

        component: Home

    },

    {

        path: '/about',

        name: 'about',

        meta: {

            layout: 'default'

        },

        component: About

    },

]

const router = new VueRouter({

    mode: 'history',

    routes

})

export default router

我为Home & About页面添加了一个meta键 在Vue-router中。

现在我们在 main.js 导入 layout

转载自 BY 迎迎 姚