Vue
概述
是一套用于构建用户界面的渐进式JavaScript框架。Vue 被设计为可以自底层向上逐层应用。Vue的核心库只关注视图层,方便与第三方库或既有项目整合。
Soc关注点分离原则
UI框架
- Ant-Design 阿里巴巴出品,基于React的UI框架
- ElementUI、iview、ice:饿了吗出品,基于Vue的UI框架
- Bootstrap:Twitter 推出的一个用于前端开发的开源工具包
- AmazeUI:妹子UI 一筐HTML5跨屏前端框架
第一个Vue程序
新建普通项目
安装Vue插件 settings–>plugins
导入vue.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello-Vue</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
message: "hello vue"
}
});
</script>
</body>
</html>
可以在f12 后 通过 vm.message=“hahahh”
改变div中的内容
什么是MVVM
MVVM是一种软件架构设计模式,是一种简化用户界面的事件驱动编程方式
源自经典的MVC模式。MVVM的核心是ViewModel层,负责转换Model中的数据对象来让数据变得更容易管理和使用,作用:向上与视图层进行双向数据绑定,向下与Model层通过接口请求进行数据交互
为什么要使用MVVM
MVVM模式和MVC模式一样,主要目的是分离视图View 和模型 Model
- 低耦合:视图可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上
- 可复用:可以帮一些视图逻辑放在一个ViewModel里面,让很多View重用这段视图逻辑
- 独立开发:开发人员可以专注于业务逻辑和数据的开发,设计人员可以专注于页面设计
- 可测试
Vue基础语法
用 v-bind来绑定元素特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello-Vue</title>
</head>
<body>
<div id="app">
<span v-bind:title="message">
鼠标悬停几秒钟查看动态绑定的提示信息
</span>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
message: "hello vue"
}
});
</script>
</body>
</html>
v-if v-else
<div id="app">
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else>C</h1>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
type: 'A'
}
});
</script>
v-for
<div id="app">
<li v-for="item in items">
{{item.message}}
</li>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
items: [
{message: 'zhangsan'},
{message: 'lisi'},
{message: 'wangwu'}
]
}
});
</script>
Vue绑定事件
v-on指令
<div id="app">
<button v-on:click="sayHi">点我</button>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {
sayHi:function(){
alert("hello")
}
}
});
</script>
Vue双向绑定
数据变化,视图变化,视图变化,数据变化
在表单中使用双向数据绑定v-model
<div id="app">
请输入:<input type="text" v-model="message"> {{message}}<br>
<input type="radio" value="男" v-model="sex">男
<input type="radio" value="女" v-model="sex">女<br>
选中的性别是:{{sex}}
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data:{
message: '',
sex: ''
}
});
</script>
Vue组件
什么是组件:组件是可复用的Vue实例,说白了就是一组可以重复使用的模板
<div id="app">
<!-- item是形参 通过 item绑定 -->
<haha v-for="item in items" v-bind:x="item"></haha>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
// 定义一个组件,名字叫haha
Vue.component('haha',{
//接收参数 ,实参
props: ['x'],
//组件的内容
template: '<li>{{x}}</li>'
})
var vm = new Vue({
el: "#app",
data: {
// 定义一个数组名为items
items: [1,3,4,7,8]},
});
</script>
注意点:
组件里面的参数 需要用props接收,定义
需要通过v-bind进行绑定
Axios异步通信
Axios是一个开源的可以在浏览器和Node.js的异步通信通信框架,主要作用是实现Ajax异步通信。主要功能:
- 从浏览器中创建XMLHttpRequests
- 从node.js创建http请求
- 支持Promise API【JS中链式编程】
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF(跨站请求伪造)
Vue的生命周期
从开始创建、初始化数据、编译模板、挂载DOM、渲染-更新=渲染、卸载
可以通过钩子事件在vue的生命周期中实现控制
实例
首先有一个data.json文件
{
"name":"狂神说java",
"url": "http://baidu.com",
"page": "1",
"isNonProfit":"true",
"address": {
"street": "含光门",
"city":"陕西西安",
"country": "中国"
},
"links": [
{
"name": "B站",
"url": "https://www.bilibili.com/"
},
{
"name": "4399",
"url": "https://www.4399.com/"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
<body>
<div id="app">
<div>{{info.name}}</div>
<div>{{info.address.street}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
//data: 是属性
//data() 是方法
data(){
return{
info: {
name: null,
address:{
street: null,
city: null,
country: null
}
}
}
},
mounted(){//钩子函数链式编程
axios.get('../data.json').then(response=>(this.info=response.data));
}
});
</script>
</body>
计算属性
什么是计算属性:
将一个能够将计算结果缓存起来的属性(将行为转化成静态的属性),可以想象为缓存
案例:
<div id="app">
<p>{{currentTime1}}</p>
<p>{{currentTime2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
message: "haha"
},
methods: {
currentTime1: function(){
return Date.now();
}
},
computed: {
currentTime2: function(){
return Date.now();
}
}
});
</script>
说明:
- methods 定义方法,调用方法需要带括号
- computed: 定义计算属性,调用属性不需要带括号
注意点:methods和computed里面的方法名不要重复
插槽
插槽用标签定义 通过name属性绑定组件
通过v-bind绑定数据
案例
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
</todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
//定义组件
Vue.component("todo",{
template: '<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
//定义放在插槽里的组件 通过slot里的name属性进行绑定
Vue.component("todo-title",{
props:['title'],
template:'<div>{{title}}</div>'
});
Vue.component("todo-items",{
props:['item'],
template:'<li>{{item}}</li>'
})
var vm = new Vue({
el: '#app',
data:{
title: "hahaha",
todoItems: [1,2,3,4]
}
})
</script>
自定义组件
案例:完成删除操作
解析:
组件todo-items 中的button按钮绑定了一个点击事件remove
remove函数 通过this.$emit()方法 绑定到 前端界面的 并将参数传递
v-on:removes="removeItems(index)
前端又和 vm里面的函数 removeItems 绑定 参数传递
<div id="app">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in todoItems"
v-bind:item="item" v-bind:index="index"
v-on:removes="removeItems(index)"></todo-items>
</todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
//定义组件
Vue.component("todo",{
template: '<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
//定义放在插槽里的组件 通过slot里的name属性进行绑定
Vue.component("todo-title",{
props:['title'],
template:'<div>{{title}}</div>'
});
Vue.component("todo-items",{
props:['item','index'],
template:'<li>{{item}} <button v-on:click="remove">删除</button></li>',
methods: {
remove:function(index){
this.$emit('removes',index);
}
}
})
var vm = new Vue({
el: '#app',
data:{
title: "hahaha",
todoItems: [1,2,3,4]
},
methods: {
removeItems: function(index){
console.log('删除了下标'+index+",元素为"+this.todoItems[index]);
this.todoItems.splice(index,1);
}
}
})
</script>
Vue-cli
什么是vue-cli
是官方提供的一个脚手架,用于快速生成一个vue的项目模板
预先定义好的目录结构和基础代码,就好比我们在创建maven项目时可以选择创建一个骨架项目,可以让我们的开发更加的快速
主要功能:
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
需要的环境;
node.js 安装无脑下一步,注意安装的环境目录
确认安装成功
cmd node-v
npm-v
百度找使用淘宝镜像的教程 ,下载比较快
然后安装 npm install vue-cli-g
vue list 可以查看所有可创建的模板
创建项目
cmd 到指定目录下
执行命令
vue init webpack myvue
一路回车选no
初始化并运行
cd myvue
npm install
npm run dev
Webpack学习
什么是Webpack:
本质上是一个现代JavaScript应用程序的静态模块打包器,当webpack处理应用程序时,会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,人后会将所有这些模块打包成一个或多个bundle
CommonsJS
服务器端的NodeJS遵循Commons JS规范,改规范核心思想是允许模块通过require方法来同步加载所需依赖的其他模块,然后通过exports或者module.exprots来导出需要暴露的接口
require("module");
export.doStuff=function(){};
module.exports=someValue;
安装Webpack
npm install webpack -g
npm install webpack-cli -g
测试
webpack -v
webpack-cli -v
Webpack使用
配置
- entry:入口文件,指定web Pack用哪个文件作为项目的入口
- output:输出 指定webpack把处理完成的文件放到指定路径
- module 模块 用于处理各种类型的文件
- plugins 插件 如热更新,代码重用
- resolve 设置路径指向
- watch 监听,用于设置文件改动后直接打包
1.创建文件夹 webpack-study
2用idea打开webpack-study并创建modules的目录 用来防止JS模块等资源文件
3.在modules下创建模块文件,如hello.js用来编写JS模块相关代码
//暴露一个方法
exports.sayHi = function(){
document.write("<div>Hello WebPack</div>");
};
4.在modules下创建一个名为main.js的入口文件,用于打包时设置entry属性
//require 导入一个模块,就可以调用这个模块中的方法了
var hello = require("./hello");
hello.sayHi();
5.在项目目录webpack-study下创建webpack.config.js配置文件,使用webpack命令打包
module.exports = {
entry: "./modules/main.js",
output: {
filename: "./js/bundle.js"
}
}
6.cmd 命令在当前路径下使用 webpack 命令打包
可以看到在webpack-study路径下生成一个dist目录,里面的js目录下有一个bundle.js文件
7.在webpack-study下新建index.html文件 使用script标签的src属性引入bundle.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>
vue-router路由
安装:
npm install vue-router --save-dev
引入
import VueRouter from 'vue-router'
//显示声明
Vue.use(VueRouter);
案例:
1.在components目录下新建Contemt.vue,Main.vue, Contemt2.vue
<template>
<h1>内容页1</h1>
</template>
<script>
export default {
name: "Contemt"
}
</script>
<style scoped>
</style>
<template>
<h1>首页</h1>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
<template>
<h1>内容页2</h1>
</template>
<script>
export default {
name: "Contemt2"
}
</script>
<style scoped>
</style>
2.新建一个和components同级的文件夹router
在router下新建index.js 配置路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import C1 from '../components/Contemt'
import C2 from '../components/Contemt2'
import Main from '../components/Main'
//安装路由
Vue.use(VueRouter);
//配置导出路由
export default new VueRouter({
routes: [
{
//路由路径
path: '/c1',
//跳转的组件
component: C1
},
{
//路由路径
path: '/c2',
//跳转的组件
component: C2
},
{
//路由路径
path: '/main',
//跳转的组件
component: Main
},
]
});
3.在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/>'
})
4.在App.vue中配置显示和链接
<template>
<div id="app">
<h1>Vue-Router</h1>
<router-link to="/main">首页</router-link>
<router-link to="/c1">内容页1</router-link>
<router-link to="/c2">内容页2</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>
5.当前路径下 ,命令行 npm run dev
6.浏览器访问http://localhost:8080
Vue项目实战
1.创建一个名为hello-vue的工程
vue init webpack hello-vue
2.安装依赖
#进入工程目录
cd hello-vue
#安装vue - router
npm install vue-router --save-dev
#安装element-ui
npm install element-ui -S
#安装依赖
npm install
#安装SASS加载器
cnpm install sass-loader node-sess --save-dev
#启动测试
npm run dev
-g 的意思是将模块安装到全局,具体安装的位置要看 npm cinfig prefix的位置
–save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖-S是缩写
–save-dev的意思是将模块安装到项目目录下。并在package的文件devDependencies节点写入依赖
3.用IDEA打开项目,整理目录结构,把没用的初始化东西删掉
assets:用于存放资源文件
components 存放vue功能组件
views:存放vue视图组件
router 存放vue-router配置
4.在views中新建Main.vue
<template>
<h1>首页</h1>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
新建Login.vue
<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%"
:before-close="handleClose">
<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>
5.router目录下新建index.js
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
}
]
});
6.配置main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(router);
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
render: h => h(app) //ElementUI规定这样使用
});
7.配置视图app.vue
<template>
<div id="app">
<router-link to="/login">登录</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
8.npm run dev 测试
报错解决:
在package.json 中改sess-loader 的版本为7.3.1
然后把node-sass的版本改为4.14.1
路由嵌套
嵌套路由又称子路由
children:[{
}]
1.创建用户信息组件,在 views/user 目录下创建一个名为 Profile.vue 的视图组件;
<template>
<h1>个人信息</h1>
</template>
<script>
export default {
name: "Profile"
}
</script>
<style scoped>
</style>
2.在用户列表组件在 views/user 目录下创建一个名为 List.vue 的视图组件;
<template>
<h1>用户列表</h1>
</template>
<script>
export default {
name: "List"
}
</script>
<style scoped>
</style>
3.修改Main.vue
<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>
4.配置嵌套路由修改 router 目录下的 index.js 路由配置文件,使用children放入main中写入子模块
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: '/main',
component: Main,
//路由嵌套
children: [
{path: '/user/profile',component: UserProfile},
{path: '/user/list',component: UserList}
]
},
{
path: '/login',
component: Login
}
]
});
启动测试
参数传递及重定向
1.前端传递参数
此时我们在Main.vue中的route-link位置处 to 改为了 :to,是为了将这一属性当成对象使用,注意 router-link 中的 name 属性名称 一定要和 路由中的 name 属性名称 匹配,因为这样 Vue 才能找到对应的路由路径;
<!--name:传组件名 params:传递参数,需要绑定对象:v-bind-->
<router-link v-bind:to="{name: 'UserProfile', params: {id: 1}}">个人信息</router-link>
2.修改路由配置,增加props:true属性
主要是router下的index.js中的 path 属性中增加了 :id 这样的占位符
{
path: '/user/profile/:id',
name: 'UserProfile',
component: UserProfile,
props:true
}
3.前端显示
在要展示的组件Profile.vue中接收参数
<template>
<div>
个人信息
{{ id }}
</div>
</template>
<script>
export default {
props: ['id'],
name: "UserProfile"
}
</script>
<style scoped>
</style>
运行测试
组件重定向
在index.js中配置
{
path: '/main',
name: 'Main',
component: Main
},
{
path: '/goHome',
redirect: '/main'
}
这里定义了两个路径,一个是 /main ,一个是 /goHome,其中 /goHome 重定向到了 /main 路径,由此可以看出重定向不需要定义组件
使用的话,只需要在Main.vue设置对应路径即可;
<el-menu-item index="1-3">
<router-link to="/goHome">回到首页</router-link>
</el-menu-item>
404 和路由钩子
1.路由模式和404
路由模式有两种
- hash:路径带符号
- history:路径不带符号
默认是第一种带符号的。使用第二种需要修改路由配置
export default new Router({
mode: 'history',
routes: [
]
});
404 界面
创建一个NotFound.vue视图组件
内容为 404
修改路由配置index.js
import NotFound from '../views/NotFound'
{
path: '*',
component: NotFound
}
2.路由钩子
beforeRouterEnter: 在进入路由之前执行
beforeRouterLeave: 在离开路由前执行
在Profile.vue中
export default {
name: "UserProfile",
beforeRouteEnter: (to, from, next) => {
console.log("准备进入个人信息页");
next();
},
beforeRouteLeave: (to, from, next) => {
console.log("准备离开个人信息页");
next();
}
}
参数说明:
- to:路由将要跳转的路径信息
- from:路径跳转前的路径信息
- next:路由的控制参数
- next() 跳入下一个页面
- next(’/path’) 改变路由的跳转方向,使其跳到另一个路由
- next(false)返回原来的页面
- next((vm)=>{}) 仅在beforeRouteEnter中可用,vm是组件实例
3.在钩子函数中使用异步请求
1.安装Axios
npm install --save vue-axios
2.main.js中引用Axios
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
3.准备数据。只有我们的 static 目录下的文件是可以被访问到的,所以我们就把静态文件放入该目录下。
4.beforeRouteEnter中进行异步请求
export default {
//第二种取值方式
// props:['id'],
name: "UserProfile",
//钩子函数 过滤器
beforeRouteEnter: (to, from, next) => {
//加载数据
console.log("进入路由之前")
next(vm => {
//进入路由之前执行getData方法
vm.getData()
});
},
beforeRouteLeave: (to, from, next) => {
console.log("离开路由之前")
next();
},
//axios
methods: {
getData: function () {
this.axios({
method: 'get',
url: 'http://localhost:8080/static/mock/data.json'
}).then(function (response) {
console.log(response)
})
}
}
}
5.执行