Nuxt.js学习笔记(一)路由与视图

Nuxt.js

  • 4. 路由
    • 4.1 路由概述
    • 4.2 基础路由
    • 4.3 动态路由
    • 4.4 动态命名路由
    • 4.5 默认路由
    • 4.6 嵌套路由
    • 4.7 过渡动效
      • 4.7.1 全局过渡动效设置
      • 4.7.1 自定义动画
  • 5. 视图
    • 5.1 默认模板
    • 5.2 默认布局【掌握】
      • 5.2.1 布局概述
      • 5.2.2 布局分析
      • 5.2.3 公共导航
    • 5.3 自定义布局
    • 5.4 错误页面
    • 5.5 Nuxt组件特殊配置
      • 5.5.1 模板代码
      • 5.5.2 head
  • 整合axios

4. 路由

4.1 路由概述

  • Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
  • 要在页面之间切换路由,我们建议使用 标签。
标签名 描述
nuxt.js中切换路由
nuxt.js的路由视图
vue默认切换路由
vue默认路由视图

4.2 基础路由

  • 自动生成基础路由规则
路径 组件位置及其名称 规则
/ pages/index.vue 默认文件 index.vue
/user pages/user/index.vue 默认文件 index.vue
/user/one pages/user/one.vue 指定文件
  • 实例

    情况1:访问路径,由pages目录资源的名称组成(目录名称、文件的名称)
      - 资源位置: ~/pages/user/one.vue
      - 访问路径:http://localhost:3000/user/one
    
    
    情况2:每一个目录下,都有一个默认文件 index.vue
      - 资源位置: ~/pages/user/index.vue
      - 访问路径:http://localhost:3000/user
    
  • 思考:/user 可以匹配几种文件?

    • pages/user.vue 文件 【优先级高】
    • pages/user/index.vue 文件

4.3 动态路由

  • 在 Nuxt.js 里面定义带参数的动态路由,需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。
路由中路径匹配 组件位置及其名称
/ pages/index.vue
/user/:id pages/user/_id.vue
/:slug pages/_slug/index.vue
/:slug/comments pages/_slug/comments.vue
  • 实例1:获得id值,创建资源 user/_id.vue






4.4 动态命名路由

  • 路径 /news/123 匹配_id.vue还是_name.vue

Nuxt.js学习笔记(一)路由与视图_第1张图片

  • 我们可以使用解决以上问题

    • 通过name 确定组件名称:“xxx-yyy”
    • 通过params 给对应的参数传递值
第2新闻
第3新闻

4.5 默认路由

路径 组件位置及其名称
不匹配的路径 pages/_.vue
  • 404页面,可以采用 _.vue进行处理

4.6 嵌套路由

  • 创建嵌套子路由,你需要添加一个 父组件Vue 文件,同时添加一个与该文件同名的目录用来存放子视图组件。

    • 要求:父组件 使用 显示子视图内容
    pages/
    --| book/						//同名文件夹
    -----| _id.vue
    -----| index.vue
    --| book.vue					//父组件
    
  • 步骤1:编写父组件 pages/child/book.vue

    
    
    
    
    
    
    
  • 步骤2:编写子组件 pages/child/book/list.vue

    
    
    
    
    
    
    
  • 步骤3:编写子组件 pages/child/book/_id.vue

    
    
    
    
    
    
    

4.7 过渡动效

4.7.1 全局过渡动效设置

  • Nuxt.js 默认使用的过渡效果名称为 page

    • .page-enter-active样式表示进入的过渡效果。
    • .page-leave-active样式表示离开的过渡效果。
  • 步骤1:创建 assets/main.css,编写如下内容:

    .page-enter-active, .page-leave-active {
      transition: opacity .5s;
    }
    .page-enter, .page-leave-active {
      opacity: 0;
    }
    
  • 步骤2:nuxt.config.js 引入main.css文件

    module.exports = {
      css: [
        'assets/main.css'
      ]
    }
    

4.7.1 自定义动画

  • 如果想给某个页面自定义过渡特效的话,只要在该页面组件中配置 transition 字段即可:

  • 步骤1:在全局样式 assets/main.css 中添加名称为test的过渡效果

    .test-enter-active, .test-leave-active {
      transition: all 2s;
      font-size:12px;
    }
     .test-enter, .test-leave-active {
      opacity: 0;
      font-size:40px;
    }
    
    
  • 步骤2:需要使用特效的vue页面编写如下:

    export default {
      transition: 'test'
    }
    

5. 视图

5.1 默认模板

  • 定制化默认的 html 模板,只需要在应用根目录下创建一个 app.html 的文件。

  • 默认模板:

    DOCTYPE html>
    <html {{ HTML_ATTRS }}>
      <head {{ HEAD_ATTRS }}>
        {{ HEAD }}
      head>
      <body {{ BODY_ATTRS }}>
        {{ APP }}
      body>
    html>
    
  • 修改模板,对低版本IE浏览器进行支持(兼容IE浏览器)

    DOCTYPE html>
    
    <html {{ HTML_ATTRS }}>
      <head {{ HEAD_ATTRS }}>
        {{ HEAD }}
      head>
      <body {{ BODY_ATTRS }}>
        {{ APP }}
      body>
    html>
    

5.2 默认布局【掌握】

5.2.1 布局概述

  • 布局:Nuxt.js根据布局,将不同的组件进行组合。

  • 模板:html页面,是布局后所有组件挂载的基础。
    Nuxt.js学习笔记(一)路由与视图_第2张图片

5.2.2 布局分析

  • layouts/default.vue 默认布局组件
    • 访问路径根据路由,确定执行组件
    • 组件具体显示的位置,有布局来确定

Nuxt.js学习笔记(一)路由与视图_第3张图片

5.2.3 公共导航

  • 修改 layouts/default.vue

5.3 自定义布局

  • 在layouts目录下创建组件:layouts/blog.vue

    
    
    
    
    
    
    
  • 在需要的视图中使用 blog布局

    
    
    

Nuxt.js学习笔记(一)路由与视图_第4张图片

5.4 错误页面

  • 编写layouts/error.vue页面,实现个性化错误页面






  • 解决问题: 404 、500、连接超时(服务器关闭)
  • 总结:所学习的技术中,有2种方式处理错误页面
    • 方式1:默认路径,_.vue (先执行)
    • 方式2:错误页面,~/layouts/error.vue

5.5 Nuxt组件特殊配置

  • 页面组件实际上是 Vue 组件,只不过 Nuxt.js 为这些组件添加了一些特殊的配置项
特殊配置项 描述
asyncData SSR进行异步数据处理,也就是服务器端ajax操作区域。
fetch 在渲染页面之前获取数据填充应用的状态树(store)
head 配置当前页面的 Meta 标签
layout 指定当前页面使用的布局
transition 指定页面切换的过渡动效
scrollToTop 布尔值,默认: false。 用于判定渲染页面前是否需要将当前页面滚动至顶部。

5.5.1 模板代码

<template>
  <h1 class="red">Hello {{ name }}!h1>
template>

<script>
export default {
	//异步处理数据, 每次加载之前被调用
  asyncData (context) {
    // called every time before loading the component
    return { name: 'World' }
  },	
	//用于在渲染页面之前获取数据填充应用的状态树(store)
  fetch () {
    // The fetch method is used to fill the store before rendering the page
  },
	//配置当前页面的 Meta 标签
  head: {
    // Set Meta Tags for this Page
  },
  // and more functionality to discover
  ...
}
script>

<style>
.red {
  color: red;
}
style>

5.5.2 head

  • html模板代码

    <html>
    <head>
    	<meta charset="UTF-8" />
    	<title>我是标题title>
    	<link rel="stylesheet" type="text/css" href="css外部文件"/>
    	<script src="js外部文件" type="text/javascript" charset="utf-8">script>
    head>
    <body>
    body>
    html>
    
  • 通过nuxt提供head属性,可以给单个也是设置:标题、外部css、外部js 等内容。
    Nuxt.js学习笔记(一)路由与视图_第5张图片







整合axios

https://blog.csdn.net/v3424/article/details/121960309

你可能感兴趣的:(nuxt,javascript,vue.js,前端,nuxt)