Vue：Webpack、router、elementUI、嵌套等学习

什么是vue-cli

  • vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板
  • 预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个估计项目就是脚手架，我们的开发更加的快速；

主要的功能

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

需要的环境（node.js）

安装nodejs：

具体步骤和更改安装的全局路径步骤可参考下列网址：

https://www.jianshu.com/p/38e3b6fe5f7a?tdsourcetag=s_pcqq_aiomsg

https://blog.csdn.net/qq_22182989/article/details/91575028

安装Node.js淘宝镜像加速器（cnpm）

# -g 就是全局安装
npm install cnpm -g

# 或每次安装东西的时候，使用如下语句解决npm速度慢的问题  
npm install --registry=https://registry.npm.taobao.org

安装的过程可能有点慢~，耐心等待！虽然安装了cnpm，但是尽量少用！   安装的位置

cnpm instal1 vue-cli-g
#测试是否安装成功#查看可以基于哪些模板创建vue应用程序，通常我们选择webpack
vue list

注意：如果安装失败试试下面这个网址https://blog.csdn.net/qq_41570658/article/details/90217047

先安装vue在安装

cnpm instal1 vue-cli-g

第一个Vue-cli应用程序

1.创建一个Vue项目，我们随便建立一个空的文件夹在电脑上 F:\Learning software cache\自学\Vue

2.创建一个基于webpack模板的vue应用程序

#1、首先需要进入到对应的目录 cd F:\Learning software cache\自学\Vue
#2、这里的myvue是顶日名称，可以根据自己的需求起名
vue init webpack myvue

image-20210326203745237

一路都选择no即可； 说明：

  • Project name：项目名称，默认回车即可
  • Project description：项目描述，默认回车即可
  • Author：项目作者，默认回车即可
  • Install vue-router：是否安装vue-router，选择n不安装（后期需要再手动添加）
  • Use ESLint to lint your code:是否使用ESLint做代码检查，选择n不安装（后期需要再手动添加)
  • Set up unit tests:单元测试相关，选择n不安装（后期需要再手动添加）
  • Setupe2etests with Nightwatch：单元测试相关，选择n不安装（后期需要再手动添加）
  • Should we run npm install for you after the,project has been created:创建完成后直接初始化，选择n，我们手动执行；运行结果！

初始化并允许

cd myvue
npm install    //安装插件等
npm run dev     //打包运行

Webpack学习

什么是webpack

  • 本质上， webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) 。当webpack处理应用程序时， 它会递归地构建一个依赖关系图(dependency graph) ， 其中包含应用程序需要的每个模块， 然后将所有这些模块打包成一个或多个bundle.
  • Webpack是当下最热门的前端资源模块化管理和打包工具， 它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换， 任何形式的资源都可以当做模块， 比如Commons JS、AMD、ES 6、CSS、JSON、Coffee Script、LESS等；
  • 伴随着移动互联网的大潮， 当今越来越多的网站已经从网页模式进化到了WebApp模式。它们运行在现代浏览器里， 使用HTML 5、CSS 3、ES 6等新的技术来开发丰富的功能， 网页已经不仅仅是完成浏览器的基本需求； WebApp通常是一个SPA(单页面应用) ， 每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的JS代码，这给前端的开发流程和资源组织带来了巨大挑战。
  • 前端开发和其他开发工作的主要区别，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题。

模块化的演进

Script标签

	<script src = "module1.js"></script>
	<script src = "module2.js"></script>
	<script src = "module3.js"></script>

这是最原始的JavaScript文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在window对象中，不同模块的调用都是一个作用域。

这种原始的加载方式暴露了一些显而易见的弊端：

  • 全局作用域下容易造成变量冲突
  • 文件只能按照<script>的书写顺序进行加载
  • 开发人员必须主观解决模块和代码库的依赖关系
  • 在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪

CommonsJS

服务器端的NodeJS遵循CommonsJS规范，该规范核心思想是允许模块通过require方法来同步加载所需依赖的其它模块，然后通过exports或module.exports来导出需要暴露的接口。

require("module");
require("../module.js");
export.doStuff = function(){};
module.exports = someValue;

优点：

  • 服务器端模块便于重用
  • NPM中已经有超过45万个可以使用的模块包
  • 简单易用

缺点：

  • 同步的模块加载方式不适合在浏览器环境中，同步意味着阻塞加载，浏览器资源是异步加载的
  • 不能非阻塞的并行加载多个模块

实现：

  • 服务端的NodeJS
  • •Browserify，浏览器端的CommonsJS实现，可以使用NPM的模块，但是编译打包后的文件体积较大
  • modules-webmake，类似Browserify，但不如Browserify灵活
  • wreq，Browserify的前身

AMD

Asynchronous Module Definition规范其实主要一个主要接口define(id?,dependencies?,factory);它要在声明模块的时候指定所有的依赖dependencies，并且还要当做形参传到factory中，对于依赖的模块提前执行。

define("module",["dep1","dep2"],functian(d1,d2){
	return someExportedValue;
});
require（["module","../file.js"],function(module，file){});

优点

  • 适合在浏览器环境中异步加载模块
  • 可以并行加载多个模块

缺点

  • 提高了开发成本，代码的阅读和书写比较困难，模块定义方式的语义不畅
  • 不符合通用的模块化思维方式，是一种妥协的实现

实现

  • RequireJS
  • curl

CMD

Commons Module Definition规范和AMD很相似，尽保持简单，并与CommonsJS和NodeJS的Modules规范保持了很大的兼容性。

define(function(require,exports,module){
	var $=require("jquery");
	var Spinning = require("./spinning");
	exports.doSomething = ...;
	module.exports=...;
});

优点：

  • 依赖就近，延迟执行
  • 可以很容易在NodeJS中运行缺点
  • 依赖SPM打包，模块的加载逻辑偏重

实现

  • Sea.js
  • coolie

ES6模块

EcmaScript 6标准增加了JavaScript语言层面的模块体系定义。ES 6模块的设计思想， 是尽量静态化， 使编译时就能确定模块的依赖关系， 以及输入和输出的变量。Commons JS和AMD模块，都只能在运行时确定这些东西。

import "jquery"
export function doStuff(){}
module "localModule"{}

优点

  • 容易进行静态分析
  • 面向未来的EcmaScript标准

缺点

  • 原生浏览器端还没有实现该标准
  • 全新的命令，新版的Node JS才支持

实现

  • Babel

大家期望的模块  系统可以兼容多种模块风格， 尽量可以利用已有的代码， 不仅仅只是JavaScript模块化， 还有CSS、图片、字体等资源也需要模块化。

安装Webpack

WebPack是一款模块加载器兼打包工具， 它能把各种资源， 如JS、JSX、ES 6、SASS、LESS、图片等都作为模块来处理和使用。

安装：

npm install webpack -g
npm install webpack-cli -g

测试安装成功

查看版本：

webpack -v
webpack-cli -v

image-20210327143823630

配置

创建 webpack.config.js配置文件

  • entry：入口文件， 指定Web Pack用哪个文件作为项目的入口
  • output：输出， 指定WebPack把处理完成的文件放置到指定路径
  • module：模块， 用于处理各种类型的文件
  • plugins：插件， 如：热更新、代码重用等
  • resolve：设置路径指向
  • watch：监听， 用于设置文件改动后直接打包
module.exports = {
	entry:"",
	output:{
		path:"",
		filename:""
	},
	module:{
		loaders:[
			{test:/\.js$/,;\loade:""}
		]
	},
	plugins:{},
	resolve:{},
	watch:true
}

直接运行webpack命令打包

使用webpack

  1. 创建项目（创建一个空文件夹，用idea打开）

image-20210327144041843

  1. 创建一个名为modules的目录，用于放置JS模块等资源文件
  2. 在modules下创建模块文件，如hello.js，用于编写JS模块相关代码

image-20210327144320339

测试

创建一个hello.js

//暴露一个方法
exports.sayHi = function () {
    document.write("<h1>Es6规范</h1>")
};

在module下创建一个mian.js文件，用于打包时设置entry属性

//require 导入一个模块，就可以调用这个模块中的方法了
var hello=require("./hello");
hello.sayHi()

在项目目录下创建webpack.config.js配置文件，使用webpack命令打包

module.exports = {
    mode:'development',
    entry:'./module/main.js',
    output:{
        filename:"./js/bundle.js"
    }
}

在项目目录下创建HTML页面，如index.html，导入webpack打包后的JS文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="dist/js/bundle.js"></script>
</body>
</html>

结构图：

image-20210327150331788

注意：

  1. 在IDEA控制台中直接执行webpack；如果失败的话，就使用管理员权限运行即可！
  2. 运行HTML看效果

说明

# 参数--watch 用于监听变化
webpack --watch

Vue-router路由

说明

学习的时候，尽量的打开官方的文档

Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成， 让构建单页面应用变得易如反掌。包含的功能有：

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于Vue js过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的CSS class的链接
  • HTML5 历史模式或hash模式， 在IE 9中自动降级
  • 自定义的滚动行为

安装router

基于第一个vue-cli进行测试学习； 先查看node modules中是否存在vue-router vue-router是一个插件包， 所以我们还是需要用n pm/cn pm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router --save-dev

如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

测试

1、先删除没有用的东西 2、components 目录下存放我们自己编写的组件 3、定义一个Content.vue 的组件

<template>
  <div>
  <h1>内容页</h1>
  </div>
</template>

<script>
    export default {
        name: "Content"
    }
</script>

<style scoped>

</style>

li.vue组件

<template>
     <h1>li</h1>
</template>

<script>
    export default {
        name: "li"
    }
</script>

<style scoped>

</style>

Main.vue组件

<template>
  <div>
    <h1>首页</h1>
  </div>

</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped>

</style>

4、安装路由，在src目录下，新建一个文件夹：router，专门存放路由，配置路由index.js，如下

import Vue from 'vue'
import VueRouter from "vue-router";
import Content from "../components/Content";
import Main from "../components/Main";
import li from "../components/li";
//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes:[
    {
      //路由路径：
      path: '/content',
      name:'content',
      //跳转的组件
      component:Content
    },
    {
      //路由路径：
      path: '/Main',
      name:'Main',
      //跳转的组件
      component:Main
    },
    {
      //路由路径：
      path: '/li',
      //跳转的组件
      component:li
    },

  ]
});

5、在main.js中配置路由

import Vue from 'vue'
import App from './App'

//导入上面创建的路由配置目录
import router from './router'//自动扫描里面的路由配置

//来关闭生产模式下给出的提示
Vue.config.productionTip = false;

new Vue({
	el:"#app",
	//配置路由
	router,
	components:{App},
	template:'<App/>'
});

6、在App.vue中使用路由

<template>
	<div id="app">
		<!--
			router-link：默认会被渲染成一个<a>标签，to属性为指定链接
			router-view：用于渲染路由匹配到的组件
		-->
		 <router-link to="/Main">首页</router-link>
    <router-link to="/Content">内容页</router-link>
    <router-link to="/li">123456</router-link>
    <router-view></router-view>
	</div>
</template>

<script>
	export default{
		name:'App'
	}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}</style>

vue+elementUI（简单快速实战）

创建工程

注意：命令行都要使用管理员模式运行

1、创建一个名为hello-vue的工程vue init webpack hello-vue 去cmd中找到对应的位置创建项目 image-20210328124254000

2、安装依赖， 我们需要安装vue-router、element-ui、sass-loader和node-sass四个插件

#进入工程目录
cd hello-vue
#安装vue-routern 
npm install vue-router --save-dev
#安装element-ui
npm i element-ui -S
#安装依赖
npm install
# 安装SASS加载器
cnpm install sass-loader node-sass --save-dev
#启功测试
npm run dev

3、Npm命令解释：

  • npm install moduleName：安装模块到项目目录下
  • npm install -g moduleName：-g的意思是将模块安装到全局，具体安装到磁盘哪个位置要看npm config prefix的位置
  • npm install -save moduleName：–save的意思是将模块安装到项目目录下， 并在package文件的dependencies节点写入依赖，-S为该命令的缩写
  • npm install -save-dev moduleName:–save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写

4.在IDEA中直接Open文件

创建登录页面

把没有用的初始化东西删掉！   在源码目录中创建如下结构：

  • assets：用于存放资源文件
  • components：用于存放Vue功能组件
  • views：用于存放Vue视图组件
  • router：用于存放vue-router配置

image-20210328132216228

1、创建首页视图，在views目录下创建一个名为Main.vue的视图组件：

<template>
  <h1>首页</h1>
</template>

<script>
  export default {
    name: "Main"
  }
</script>

<style scoped>

</style>

2、创建登录页视图在views目录下创建名为Login.vue的视图组件，其中el-form的元素为ElementUI组件；

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        form: {
          username: '',
          password: ''
        },

        // 表单验证，需要在 el-form-item 元素中增加 prop 属性
        rules: {
          username: [
            {required: true, message: '账号不可为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不可为空', trigger: 'blur'}
          ]
        },

        // 对话框显示和隐藏
        dialogVisible: false
      }
    },
    methods: {
      onSubmit(formName) {
        // 为表单绑定验证功能
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
            this.$router.push("/main");
          } else {
            this.dialogVisible = true;
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
</style>

创建路由，在router目录下创建一个名为index.js的vue-router路由配置文件

import Vue from 'vue';
import Router from 'vue-router';

import Main from '../views/Main';
import Login from "../views/Login";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main
    },
    {
      path: '/login',
      component: Login
    }
  ]
});

编写main.js'

import Vue from 'vue'
import App from './App'

import router from './router'

//elementUI
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(router);
Vue.use(Element)
new Vue({
  el: '#app',
  router,
  render: h => h(App) //ElementUI
})

3、编写App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

  export default {
    name: 'App',
  }
</script>

运行项目

1、在Terminal输入

npm run dev

2、如果报错如下图：Module build failed: TypeError: loaderContext.getResolve is not a function（sass-loader版本太高）

//1.修改sass-loader的版本为^7.3.1
//2.重新安装配置环境
npm install
//或者 cnpm install

2. 卸载当前，重新下载

 ```shell
 // 卸载当前版本
 npm uninstall sass-loader
 // 安装7.3.1版本
 npm install sass-loader@7.3.1 --save-dev
 ```

3. 如果报错为：<font color=red>Module build failed: Error: Cannot find module 'node-sass'</font>


 - npm执行

   ```shell
   npm install node-sass --save-dev
   ```

 - npm执行报错，则cnpm执行

   ```shell
   cnpm install node-sass --save
   ```

   - 如果cnpm没有安装

     ```shell
     npm install -g cnpm --registry=https://registry.npm.taobao.org
     
     //或者
     npm install -g cnpm
     ```

image-20210328143708888

路由嵌套

嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

image-20210328144639575

1、用户信息组件，在 views/user 目录下创建一个名为 Profile.vue 的视图组件；

<template>
    <div>
      <h1>个人信息</h1>
    </div>
</template>

<script>
    export default {
        name: "UserProfile"
    }
</script>

<style scoped>

</style>

2、用户列表组件在 views/user 目录下创建一个名为 List.vue 的视图组件；

<template>
    <div>
      <h1>用户列表</h1>
    </div>
</template>

<script>
    export default {
        name: "UserList"
    }
</script>

<style scoped>

</style>

image-20210328155814726

3、配置嵌套路由修改 router 目录下的 index.js 路由配置文件，代码如

import Vue from 'vue'
import Router from 'vue-router'

import Main from '../views/Main'
import Login from '../views/Login'

import UserList from '../views/user/List'
import UserProfile from '../views/user/proFile'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/main',
      component: Main,
      children: [
        {
          path: '/user/profile',
          component: UserProfile
        },
        {
          path: '/user/list',
          component: UserList
        }
      ]
    }
  ]
})

4、修改首页视图，我们修改 Main.vue 视图组件，此处使用了 ElementUI 布局容器组件，代码如下：

<template>
    <div>
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                  <router-link to="/user/profile">个人信息</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                  <router-link to="/user/list">用户列表</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
              <el-menu-item-group>
                <el-menu-item index="2-1">分类管理</el-menu-item>
                <el-menu-item index="2-2">内容列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-container>
          <el-header style="text-align: right; font-size: 12px">
            <el-dropdown>
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-header>

          <el-main>
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped lang="scss">
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

说明：

在元素中配置了用于展示嵌套路由,主要使用个人信息展示嵌套路由内容

参数传递

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。此时我们就需要传递参数了；

组件转发

route方法

修改路由配置,

  • 主要是在 path 属性中增加了 :id，:name 这样的占位符
routes: [
  {
    path: '/main',
    component: Main,//嵌套路由
    children: [
      {
        path: '/user/Profile/:id/：name',
        name: 'UserProfile',
        component: UserProfile
      },
      {path: '/user/List', component: UserList},
    ]
  },
  {
    path: '/login',
    component: Login
  }
]

2、传递参数

  • 此时我们将 to 改为了 :to，是为了将这一属性当成对象使用，
  • 注意 router-link 中的 name 属性名称一定要和路由中的name 属性名称 匹配，因为这样 Vue 才能找到对应的路由路径；
<el-menu-item index="1-1">
  <!--name地址，params传递参数  需要对象：v-bind-->
  <router-link :to="{name :'UserProfile',params:{id:1,name:'ljy'}}">个人信息</router-link>
</el-menu-item>

image-20210328160721682

3、接收参数，在目标组件中

<div>
    <h1>个人信息</h1>
    {{$route.params.id}}
    {{$route.params.name}}
</div>

image-20210328160802843

这里注意：

所有的元素，不能直接在根节点下

使用 props 的方式

修改路由配置 , 主要增加了 props: true 属性

routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/main',
      component: Main,
      children: [
        {
          path: '/user/profile/:id/:name',
          name: 'UserProfile',
          component: UserProfile,
          props: true
        },
        {
          path: '/user/list',
          component: UserList
        }
      ]
    }
  ]

传递参数和之前组件转发一样

接收参数为目标组件增加 props 属性

<div>
    <h1>个人信息</h1>
    {{id}}
    {{name}}
</div>

组件重定向

重定向的意思大家都明白，但 Vue 中的重定向是作用在路径不同但组件相同的情况下，比如：

{
    path: '/goHome',
    redirect: '/main'
}
  • 说明：这里定义了两个路径，一个是 /main ，一个是 /goHome
    • 其中 /goHome 重定向到了 /main 路径，由此可以看出重定向不需要定义组件；
  • 使用的话，只需要设置对应路径即可；

image-20210328161226465

<el-menu-item index="1-3">
    <router-link to="/goHome">回到首页</router-link>
</el-menu-item>

路由模式与 404

路由模式有两种

  • hash：路径带 # 符号，如 http://localhost/#/login

  • 默认为hash路由模式

    export default new Router({
  routes: []
})

  • history：路径不带 # 符号，如 http://localhost/login

    history路由模式

    export default new Router({
  mode: 'history',
  routes: []
})

处理404

1、在Views下创建一个名为 NotFound.vue 的视图组件，代码如下：

<template>
  <div>
    <h1>404，你的页面走丢了</h1>
  </div>
</template>

<script>
  export default {
    name: "NotFound"
  }
</script>

<style scoped>

</style>

2、去router的index.js中加入路由

import NotFound from "../views/NotFound";

    {
      path:'*',
      component:NotFound
    }

路由钩子与异步请求

  • beforeRouteEnter：在进入路由前执
  • beforeRouteLeave：在离开路由前执行

如在Profile.vue里加

<script>
  export default {
    props: ['id'],
    name: "UserProfile",
    beforeRouteEnter: (to, from, next) => {
      console.log("进入之前")
      next();
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("进入之hou")

    },
  }
</script>

参数说明：

  • to：路由将要跳转的路径信息
  • from：路径跳转前的路径信息
  • next：路由的控制参数
  • next() 跳入下一个页面
  • next(’/path’) 改变路由的跳转方向，使其跳到另一个路由
  • next(false) 返回原来的页面
  • next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例

在钩子函数中使用异步请求

1、安装Axios

cnpm install --save vue-axios

2、main.js引用Axios

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

3、准备数据 ： 只有我们的 static 目录下的文件是可以被访问到的，所以我们就把静态文件放入该目录下static/mock/data.json。

image-20210328204407199

{
  "name": "ljy",
  "url": "https://user.qzone.qq.com/1465396771/infocenter",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "合川",
    "city": "重庆",
    "country": "中国"
  },
  "links": [
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    },
    {
      "name": "狂神说Java-Vue",
      "url": "https://www.bilibili.com/video/BV18E411a7mC?p=9"
    }
  ]
}

4、运行项目npm run dev看是否正常启动

  • 因为cnpm可能安装失败，重新安装一下cnpm install --save vue-axios

image-20210328204532771

只是因为没有安装起这个包

5、在beforeRouteEnter中进行异步请求

Profile.vue页面：

<script>
  export default {
    props: ['id'],
    name: "UserProfile",
    beforeRouteEnter: (to, from, next) => {
      console.log("进入之前")  //加载数据
      next(vm => {
        vm.getData();  //进入路由之前执行getData方法
      });
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("进入之hou")
    },
    methods: {
      getData: function () {
        this.axios({
          method: 'get',
          url: 'http://localhost:8080/static/mock/data.json'
        }).then(function (response) {
          console.log(response)
        })
      }
    }
  }
</script>
posted @ 2021-03-29 11:30  喂s别闹  阅读(136)  评论(0)  编辑  收藏  举报