您的位置：首页 > Web前端 > Vue.js

Nuxt学习--layouts router vuex

2021-08-27 11:05 411 查看

layout

layouts
文件夹中写布局用的vue文件，通过
<nuxt />
来应用pages文件夹中的页面，页面中能配置
layout
对象来指定页面放入哪个布局

路由

  • nuxt中的路由不需要手动配置，要放在

    pages
    文件夹下就会自动配置路由

    每个
    pages
    页面通过
    head
    函数来配置html的head中的标签，如
    title meta

  • 路由见跳转使用

    <nuxt-link to=""></nuxt-link>
    来进行

  • 和

    vue-router
    一样通过
    $router $route
    来控制路由

  • 对于匹配路由，需要用文件夹代替固定路径下划线代替冒号

      如 
      test/:id
      应该在
      test
      文件夹下命名为
      _id.vue

  • 二级路由：在一级路由下用

    <nuxt-child />
    引用二级路由的页面，通过建立与需要路由同名的文件夹，在文件夹下定义二级路由，
    index.vue
    为默认的显示页面

      因为二级引用需要有同名文件夹，所以
      index.vue
      不能有二级路由

    二级路由的文件格式：

    状态管理

    状态管理的配置在stroe文件夹下，新建一个

    index.js
    来配置。

    • 每一项配置都要导出
    • state必须是一个方法，该方法返回一个对象
    • 在
      store
      文件夹下的每个js文件都会被作为一个vuex模块导入vuex，每个模块都使用了命名空间 
      index.js
      会被作为根导入
  • 也可以将每个模块拆分为
    state getters ...
    来放入模块名的文件夹下来定义模块（这时每个js文件都用默认导出）
    • 内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航