分类
代码人生

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

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

使用 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

https://itnext.io/anyway-heres-how-to-create-a-multiple-layout-system-with-vue-and-vue-router-b379baa91a05

由迎迎 姚

关于,介词,引进某种行为的关系者,组成介词结构做状语或定语。