Vue
1.简介
前端三大框架: Angular,React,Vue
JavaScript框架
●jQuery: 大家熟知的JavaScript框架,优点是简化了DOM操作,缺点是DOM操作太频繁,影响前端性能;在前端眼里使用它仅仅是为了兼容IE6、7、8;
●Angular: Google收购的前端框架,由一群Java程序员开发,其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念,与微软合作,采用TypeScript语法开发;对后台程序员友好,对前端程序员不太友好;最大的缺点是版本迭代不合理(如: 1代-> 2代,除了名字,基本就是两个东西;截止发表博客时已推出了Angular6)
●React: Facebook出品,一款高性能的JS前端框架;特点是提出了新概念[虚拟DOM]用于减少真实DOM操作,在内存中模拟DOM操作,有效的提升了前端渲染效率;缺点是使用复杂,因为需要额外学习一门[JSX] 语言;
●Vue:一款渐进式JavaScript框架,所谓渐进式就是逐步实现新特性的意思,如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点;
●Axios :前端通信框架;因为Vue 的边界很明确,就是为了处理DOM,所以并不具备通信能
力,此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用jQuery提供的AJAX通信功能;
UI框架
●Ant-Design:阿里巴巴出品,基于React的UI框架
●ElementUI、 iview、 ice: 饿了么出品,基于Vue的UI框架
●Bootstrap: Twitter推出的一个用于前端开发的开源工具包
●AmazeUI:又叫"妹子UI",一款HTML5跨屏前端框架.
JavaScript 构建工具
●Babel: JS编译工具,主要用于浏览器不支持的ES新特性,比如用于编译TypeScript
●WebPack: 模块打包器,主要作用是打包、压缩、合并及按序加载
2.入门
Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架,发布于2014年2月。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库(如: vue-router, vue-resource, vuex)或既有项目整合。
MVVM模式的实现者
●Model:模型层,在这里表示JavaScript对象
●View:视图层,在这里表示DOM (HTML操作的元素)
●ViewModel:连接视图和数据的中间件,Vue.js就是MVVM中的ViewModel层的实现者,在MVVM架构中,是不允许数据和视图直接通信的,只能通过ViewModel来通信,而ViewModel就是定义了一个Observer观察者
●ViewModel能够观察到数据的变化,并对视图对应的内容进行更新
●ViewModel能够监听到视图的变化,并能够通知数据发生改变
Vue.js 就是一个MVVM的实现者,核心实现了DOM监听和数据绑定,不需要获取DOM节点就能改变数据
CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> //未压缩
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> //压缩的,体积小适合生产环境
v-bind
绑定值 {{}}或 v-bind: 如v-if
//if else
<h1 v-if="ok==='A'">A</h1>
<h1 v-else-if="ok==='b'">b</h1>
<h1 v-else>c</h1>
//for 遍历items数组
<ul v-for="item in items">
<li>{{item.message}}</li>
</ul>
js字符加引号 []数据 {}对象 el:对象,选择器 data: 数据
var a = new Vue({
el: '#a',
data: {
items: [
{message: "java"},
{message: "a"},
{message: "aaa"}
]
}
})
方法定义
event 事件 methods:方法 通过触发的事件 v-on:事件=“方法”
事件可以去jQuery官网查https://www.jquery123.com/category/events/mouse-events/
<div id="click">
//通过点击事件触发tanchuang方法
<button type="button" v-on:click="tanchuang">click me</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vu = new Vue({
el: '#click',
data: {
massage: '弹窗'
},
methods: { //所有的方法都要放在methods中,methods:{方法名:function{方法体} 方法名:function{方法体}}
tanchuang: function (event) {
alert(this.massage)
}
}
})
双向绑定
数据的值改变会改变页面的值,页面的值也会改变数据的值。
Vue.js 是一个 MVVM 框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。
v-model 进行双向绑定
v-model
指令在表单 <input>
、<textarea>
及 <select>
元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
注意:v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。应该通过 JavaScript 在组件的 data 选项中声明初始值!
v-model会改变单选框和下拉框的设置的初始值
<div id="a">
<select v-model="message">
<!--ios系统默认为空的话无法选择-->
<option disabled value="">--请选择--</option>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
{{message}}
</div>
注意:如果 v-model
表达式的初始值未能匹配任何选项, 元素将被渲染为“未选中”状态。在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change 事件。因此,更推荐像上面这样提供一个值为空的禁用选项。
组件
component 组件,组成的 props 道具
定义: Vue.component(‘组件名’,{props: [‘v-bin绑定的值’] template:’模板‘})
<div id="a">
//遍历,绑定值aa到item
<lt v-for="item in items" v-bind:aa="item"></lt> //前边是新命名的,后边是数据的值,绑定到aa
</div>
<script>
//定义组件,组件名
Vue.component('lt',{
props:['aa'], //接收绑定值
template: '<li>{{aa}}</li>' //取出绑定的值
})
var vm = new Vue({
el: '#a',
data: {
items: ['aa','bb','cc']
}
})
</script>
v-for=“item in 数据的值”
Axios异步通信框架
Axios 是一个开源的可以用在浏览器端和 NodeJS
的异步通信框架,主要作用就是实现 AJAX 异步通信,其功能特点如下:
- 从浏览器中创建
XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API [JS中链式编程]
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF(跨站请求伪造)
在线CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
由于 Vue.js
是一个 视图层框架 并且作者(尤雨溪)严格准守 SoC (关注度分离原则),所以 Vue.js
并不包含 AJAX 的通信功能,为了解决通信问题,作者单独开发了一个名为 vue-resource
的插件,不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios
框架。少用jQuery,因为它操作Dom太频繁!
v-bind:
可以绑定一切 v-bind: href=‘aa’ 绑定href的url为aa的
<div id="a">
<div>{{info.name}}</div>
<a v-bind:href="info.url">点我</a>
<ul v-for="item in info.links">
<li>{{item.name}}</li>
</ul>
</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>
var vm = new Vue({
el: '#a',
data(){
return{
info:{
url: null,
name: null,
links:[
{name:null,
url:null
}
]
}
}
},
mounted(){ //钩子函数
axios.get('../data.json').then(response=>(this.info=response.data))
}
})
mounted()钩子函数{axios.get(‘数据名’)。then(response=>(this.info=response.data))}
然后data()函数{return(info:{数据:null})}
计算属性
计算属性会将方法执行的结果封装到方法名的属性中,下次再执行相同的方法时,直接调用其结果,如果方法中有属性值的变更,那么其结果也会发生变化。
定义 computed:{方法名:function{}} 调用时直接调用方法名
<div id="a">
<p>{{method()}}</p>
<p>{{comput}}</p>
</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>
var vm = new Vue({
el: '#a',
data:{
message: 'aaa'
},
methods:{
method:function () {
return Date.now()
}
},
computed:{
comput:function () {
this.message;
return Date.now()
}
}
})
</script>
注意:methods 和 computed 里的东西不能重名
说明:
- methods:定义方法,调用方法使用 method(),需要带括号
- computed:定义计算属性,调用属性使用 compud,不需要带括号;
- 如何在方法中的值发生了变化,则缓存就会刷新!
结论:
调用方法时,每次都需要进行计算,既然有计算过程则必定产生系统开销,那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来,采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,以节约我们的系统开销;
slot
槽,插口
缩写 v-bind:直接 : v-on: 变 @
<div id="a">
<total>
<total_top slot="total_top" :a="titlew"></total_top>
<total_text slot="total_text" v-for="item in items" :b="item"></total_text>
</total>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
Vue.component("total",{
template: '<div>'+
'<slot name="total_top"></slot>'+
'<ul>' +
'<slot name="total_text"></slot>'+
'</ul>'+
'</div>'
}
)
Vue.component("total_top",{
props: ['a'],
template: '<p>{{a}}</p>'
})
Vue.component("total_text",{
props: ['b'],
template: '<li>{{b}}</li>'
})
var vm = new Vue({
el: '#a',
data: {
titlew: 'aa',
items: [
'java','c','aa'
]
}
})
</script>
自定义事件内容分发
数据项在 Vue 的实例中,但删除操作要在组件中完成,组件如何才能删除 Vue 实例中的数据呢?此时就涉及到参数传递与事件分发了,Vue 为我们提供了自定义事件的功能很好的帮助我们解决了这个问题;使用 this.$emit(‘自定义事件名’, 参数),操作过程如下:
splice删除(0,1,”a",“b”)从下标是0的开始向后删除1位,再添加a和b。参数可变,重写方法多
绑定事件,事件名必须和要和自定义的函数名相同
自定义事件分发内容 this.$emit('和删除函数绑定的事件,下标参数)
<div id="a">
<total>
<total_top slot="total_top" :a="titlew"></total_top>
<!--绑定事件,事件名必须和要和自定义的函数名相同-->
<total_text slot="total_text" v-for="(item,index) in items"
:b="item" :index="index" v-on:remove="removeItems(index)"></total_text>
</total>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
Vue.component("total",{
template: '<div>'+
'<slot name="total_top"></slot>'+
'<ul>' +
'<slot name="total_text"></slot>'+
'</ul>'+
'</div>'
}
)
Vue.component("total_top",{
props: ['a'],
template: '<p>{{a}}</p>'
})
Vue.component("total_text",{
props: ['b','index'],
template: '<li>{{b}}{{index}} <button v-on:click="remove">删除</button></li>',
//自定义事件分发内容 this.$emit('和删除函数绑定的事件,下标参数)
methods:{
remove:function (index) {
alert(this.index)
this.$emit('remove',this.index)
}
}
})
var vm = new Vue({
el: '#a',
data: {
titlew: 'aa',
items: [
'java','c','aa'
]
},
//删除方法
methods:{
removeItems: function (index) {
console.log(index)
this.items.splice(index,1)
}
}
})
</script>
3.Vue 入门小结
核心 : 数据驱动 , 组件化
优点 : 借鉴了 AngulaJS 的模块化开发 和 React 的虚拟Dom , 虚拟Dom就是把Dom操作放到内存中执行;
常用的指令
- v-if
- v-else-if
- v-else
- v-for
- v-on 绑定事件 , 简写
@
- v-model 数据双向绑定
- v-bind 给组件绑定参数,简写
:
组件化:
- 组合组件 slot 插槽
- 组件内部绑定事件需要使用到
this.$emit("事件名",参数)
; //自定义事件内容分发 - 计算属性的特色,缓存计算数据 computed
遵循SoC 关注度分离原则,Vue是纯粹的视图框架,并不包含,比如Ajax之类的通信功能,为了解决通信问题,我们需要使用Axios 框架做异步通信;
说明
Vue的开发都是要基于NodeJS, 实际开发采用 vue-cli脚手架开发,vue-router 路由,vuex做状态管理; Vue UI,界面我们一般使用 ElementUI(饿了么出品),或者ICE(阿里巴巴出品!)来快速搭建前端项目~
官网:
- https://element.eleme.cn/#/zh-CN
- https://ice.work/
七大属性
-
el属性
-
- 用来指示vue编译器从什么地方开始解析 vue的语法,可以说是一个占位符。
-
data属性
-
- 用来组织从view中抽象出来的属性,可以说将视图的数据抽象出来存放在data中。
-
template属性
-
- 用来设置模板,会替换页面元素,包括占位符。
-
methods属性
-
- 放置页面中的业务逻辑,js方法一般都放置在methods中
-
render属性
-
- 创建真正的Virtual Dom
-
computed属性
-
- 用来计算
-
watch属性
-
- watch:function(new,old){}
- 监听data中数据的变化
- 两个参数,一个返回新值,一个返回旧值,
-
var a = new Vue({ el: '#a', data: { } }) Vue.component('sads',{ props: view视图绑定数据 template:模板 } )
4.vue-cli
npm run dev 启动
Ctrl + V 停止
npm install 安装所需依赖
npm run dev
第一个 vue-cli 应用程序
创建一个Vue项目,我们随便建立一个空的文件夹在电脑上
创建一个基于 webpack 模板的 vue 应用程序
# 这里的 myvue 是项目名称,可以根据自己的需求起名
vue init webpack myvue
一路都选择no即可;
初始化并运行
cd myvue
npm install
npm run dev
执行完成后,目录多了很多依赖
5.webpack
webspck打包工具,降级es6成浏览器支持的es语法
WebPack 是一款模块加载器兼打包工具,它能把各种资源,如 JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。
安装
npm install webpack -g
npm install webpack-cli -g
测试安装成功:
webpack -v
webpack-cli -v
配置
创建 webpack.config.js
配置文件
- entry:入口文件,指定 WebPack 用哪个文件作为项目的入口
- output:输出,指定 WebPack 把处理完成的文件放置到指定路径
- module:模块,用于处理各种类型的文件
- plugins:插件,如:热更新、代码重用等
- resolve:设置路径指向
- watch:监听,用于设置文件改动后直接打包
export 导出,出口
webpack.config.js
module.exports = {
//入口
entry: './modles/main.js',
//出口
output:{
filename:'./js/bundle.js'
}
}
说明: 一直监听入口js的变化,随时刷新,热部署
# 参数 --watch 用于监听变化
webpack --watch
6.路由
router 路由器
e-router 是一个插件包,所以我们还是需要用 npm/cnpm 来进行安装的。打开命令行工具,进入你的项目目录,输入下面命令。
npm install vue-router --save-dev
同级目录下 ./
文件名
所有的插件操作
//导入
import VueRouter from 'vue-router'
//显示的声明
Vue.user(VueRouter)
scoped 作用域
文档使用工具:docsify.js.org
vue模板只能有一个根对象
所以用div或者别的标签包裹住所有标签就好了。
定义组件
<template>
<h1>aaaa</h1>
</template>
<script>
export default {
name: "Componentl"
}
</script>
<style scoped>
</style>
安装路由,在src目录下,新建一个文件夹 : router,专门存放路由
import Vue from 'vue'
import VueRouter from 'vue-router'
//导入组件
import Componentl from '../components/Componentl'
import Main from '../components/Main'
//安装路由
Vue.use(VueRouter)
//导出
export default new VueRouter({
routes: [{
//路径
path: '/component',
//名字
name: 'Componentl',
//跳转组件
component:Componentl
},
{
//路径
path: '/main',
//名字
name: 'Main',
//跳转组件
component:Main
}
]
})
main.js引入,在main.js
中配置路由
import Vue from 'vue'
import App from './App'
//导入路由
import router from '../router/index'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
//配置路由
router,
components: { App },
template: '<App/>'
})
App.vue显示
<template>
<div><h1>bbb</h1>
<!--跳转链接-->
<router-link to="/main">首页</router-link>
<router-link to="/component">组件</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>
7.实战快速上手
结合 ElementUI
组件库
创建工程
注意: 命令行都要使用管理员模式运行
1、创建一个名为 hello-vue 的工程 vue init webpack hello-vue
2、安装依赖,我们需要安装 vue-router、element-ui、sass-loader 和 node-sass 四个插件
# 进入工程目录
cd hello-vue
# 安装 vue-router
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 moduleNam
e:–save-dev 的意思是将模块安装到项目目录下,并在 package 文件的 devDependencies 节点写入依赖,-D 为该命令的缩写
创建登录页面
把没有用的初始化东西删掉!
在源码目录中创建如下结构:
- assets:用于存放资源文件
- components:用于存放 Vue 功能组件
- views:用于存放 Vue 视图组件
- router:用于存放 vue-router 配置
创建首页视图,在 views 目录下创建一个名为 Main.vue 的视图组件;
<template>
<div>
首页
</div>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
创建登录页视图在 views 目录下创建一个名为 Login.vue 的视图组件,其中 el-* 的元素为 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%"
: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>
创建路由,在 router 目录下创建一个名为 index.js 的 vue-router 路由配置文件
import Vue from 'vue'
import Router from 'vue-router'
import Login from "../views/Login"
import Main from '../views/Main'
Vue.use(Router);
export default new Router({
routes: [
{
// 登录页
path: '/login',
name: 'Login',
component: Login
},
{
// 首页
path: '/main',
name: 'Main',
component: Main
}
]
});
配置路由,修改入口代码,修改 main.js 入口代码
import Vue from 'vue'
import VueRouter from 'vue-router'
import router from './router'
// 导入 ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
// 安装路由
Vue.use(VueRouter);
// 安装 ElementUI
Vue.use(ElementUI);
new Vue({
el: '#app',
// 启用路由
router,
// 启用 ElementUI
render: h => h(App)
});
修改 App.vue 组件代码
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
如果出现错误: 可能是因为sass-loader的版本过高导致的编译错误,当前最高版本是8.x,需要退回到7.3.1 ;
去package.json文件里面的 "sass-loader"的版本更换成7.3.1,然后重新cnpm install
就可以了;
嵌套路由
//导入vue
import Vue from 'vue';
import VueRouter 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(VueRouter);
//导出
export default new VueRouter({
routes: [
{
//登录页
path: '/main',
component: Main,
// 写入子模块
children: [
{
path: '/user/profile',
component: UserProfile,
}, {
path: '/user/list',
component: UserList,
},
]
},
//首页
{
path: '/login',
component: Login
},
]
})
参数传递
第一种取值方式
1、 修改路由配置, 主要是router下的index.js中的 path 属性中增加了 :id 这样的占位符
{
path: '/user/profile/:id',
name:'UserProfile',
component: UserProfile
}
12345
2、传递参数
此时我们在Main.vue中的route-link位置处 to 改为了 :to,是为了将这一属性当成对象使用,注意 router-link 中的 name 属性名称 一定要和 路由中的 name 属性名称 匹配,因为这样 Vue 才能找到对应的路由路径;
<!--name是组件的名字 params是传的参数 如果要传参数的话就需要用v:bind:来绑定-->
<router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>
12
3、在要展示的组件Profile.vue中接收参数 使用 {{$route.params.id}}来接收
Profile.vue 部分代码
<template>
<!-- 所有的元素必须在根节点下-->
<div>
<h1>个人信息</h1>
{{$route.params.id}}
</div>
</template>
1234567
第二种取值方式 使用props 减少耦合
1、修改路由配置 , 主要在router下的index.js中的路由属性中增加了 props: true 属性
{
path: '/user/profile/:id',
name:'UserProfile',
component: UserProfile,
props: true
}
123456
2、传递参数和之前一样 在Main.vue中修改route-link地址
<!--name是组件的名字 params是传的参数 如果要传参数的话就需要用v:bind:来绑定-->
<router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>
12
3、在Profile.vue接收参数为目标组件增加 props 属性
Profile.vue
<template>
<div>
个人信息
{{ id }}
</div>
</template>
<script>
export default {
props: ['id'],
name: "UserProfile"
}
</script>
<style scoped>
</style>
路由模式与 404
路由模式有两种
- hash:路径带 # 符号,如 http://localhost/#/login
- history:路径不带 # 符号,如 http://localhost/login
修改路由配置,代码如下:
export default new Router({
mode: 'history',
routes: [
]
});
1.创建一个NotFound.vue视图组件
NotFound.vue
<template>
<div>
<h1>404,你的页面走丢了</h1>
</div>
</template>
<script>
export default {
name: "NotFound"
}
</script>
<style scoped>
</style>
123456789101112
2.修改路由配置index.js
import NotFound from '../views/NotFound'
{
path: '*',
component: NotFound
}
3.效果图
路由钩子
beforeRouteEnter:在进入路由前执行
beforeRouteLeave:在离开路由前执行
在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 是组件实例
在钩子函数中使用异步请求
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 目录下的文件是可以被访问到的,所以我们就把静态文件放入该目录下。
数据和之前用的json数据一样 需要的去上述axios例子里
// 静态数据存放的位置
static/mock/data.json
4.在 beforeRouteEnter 中进行异步请求
Profile.vue
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.路由钩子和axios结合图