zoukankan      html  css  js  c++  java
  • vue-ssr之nuxt.js的layout布局

    在前端开发中,我们通常需要把公用部分抽离出来,单独作为一个layout文件,用来引入公共文件,这样我们就不需要在每一个页面都去引入公共文件了。那么我们在nuxt.js中如何实现一个公用模板抽离呢?

    首先,nuxt.js为我们提供了默认的layout, 即项目文件下面的layouts/default.vue;所有的布局文件,都需要放在这里,并且该目录名为Nuxt.js保留的,不可更改。

    默认布局

    layouts/default.vue进行改造后,整个项目都可以使用这个布局了。

    <template>
      <div>
        <el-container>
          <v-header></v-header>
          <el-main>
            <nuxt/>
          </el-main>
        </el-container>
      </div>
    </template>
    
    <script>
    import vHeader from '@/components/header'
    export default {
      components: {
        vHeader
      }
    };
    </script>
    
    

    自定义布局

    有的使用因为业务需求的不同,我们可能会遇到,一个默认的布局文件无法满足的情况,这个时候我们就可以使用自定义布局了,在layouts/下新建blog.vue文件,用来做博客的公用布局。

    blog.vue文件

    <template>
      <div>
        <h1>我是博客布局文件</h1>
        <nuxt/>
      </div>
    </template>
    
    <script>
    export default {};
    </script>
    
    <style>
    </style>
    
    
    

    然后在项目使用的使用理由nuxt.js为我们提供的layout参数配置即可

    <template>
        <div>
            这是博客布局的测试页面
        </div>
    </template>
    
    <script>
    export default {
        layout: 'blog'
    }
    </script>
    
    <style>
    
    </style>
    
    

    本文参考

    https://zh.nuxtjs.org/guide/views

  • 相关阅读:
    Embed标签中的symbol的作用
    loader的右键菜单不响应
    使用[frame()]数据标签制作的纯AS preLoader
    REST是什么(转)
    Ruby on Rails
    Ruby on Rails 数据库连接及mysql乱码
    Ruby On Rails——安装
    Asp.net mvc 3 beta 新特性介绍
    使用 Git 管理源代码
    Asp.net发送邮件的两种方法
  • 原文地址:https://www.cnblogs.com/huyifei/p/10341974.html
Copyright © 2011-2022 走看看