一直在路上,从未停止前进【一直在更新中。。。】
上一篇:Vuejs基础版
上一篇:Vuejs进阶版
第一章:Vue组件化编程
一、区分 js 表达式和 js 代码(语句)
二、el 和 data 的两种写法
<script>
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
// 创建Vue实例
const app = new Vue({
el:"#root", // element 挂载el,用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串
data:{
message:"Hello Vuejs",
age:18
}
})
</script>
1、el 挂载元素的两种写法
1、 el:"#root",
2、app.$mount("#root")
2、data 的两种写法
第一种:对象式
data:{
message:"Hello 博客zhu虎康",
age:18
}
第二种:函数式
data:function(){
data:(){
console.log("this----",this)//此处的this是Vue实例对象
return{
message:"Hello 博客zhu虎康",
age:18
}
}
==注意1: 在组件开发中,data 必须使用函数式,否则会报错==
==注意2: 由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this 就不再是Vue实例了==
三、数据代理
1、Objet.defineproperty方法
首先,我们来看以下一组图
在图中的两种定义方法,第一种明显比第一种要简单,但是在控制台打印查看的时候,发现两者定义的关键字是不一样的颜色。
两者的比较:Objet.defineproperty定义出来的变量是不可以被枚举的,即在遍历对象中的各个属性的时候,是无法将其定义的属性进行遍历输出。
要想让其Objet.defineproperty定义出来的方法中的属性被枚举得到,要对以下属性进行修改。
Objet.defineproperty中的其他方法:
getter 和 setter 方法:
将number定义在函数外,通过Objet.defineproperty设置age的值为number,当修改age属性时,就会自动修改number值,即get()和set()方法会被触发到
2、什么是数据代理
数据代理:通过一个对象代理对另一个对象中属性的操作(读 / 写)
3、Vue中的数据代理
原理:
1.Vue中的数据代理;
通过vm对象来代理data对象中属性的操作(读/写)
2.Vue中数据代理的好处:
更加方便的操作data中的数据
3.基本原理:
通过object.defineProperty()把data对象中所有属性添加到vm 上.
为每一个添加到vm上的属性,都指定一个getter/setter。
在getter/setter内部去操作(读/写)data中对应的属性。
然后再 : vm._data = data
四、响应式修改data中的数组中的项
const vm = new Vue({
el:'#root',
student:{
hobbys:['吃饭','睡觉','打豆豆'],
friends:[
{name:'jerry',age:35},
{name:'toney',age:36}
]
}
})
要求:Vue 中有如上 data,要求对其数组 hobbys 更改:
将 数组 hobbys中的第一项修改为 '开车'
methods:{
updateHobby(){
// 第一种修改方式,用数组的splice方法
this.student.hobbys.splice(0,1,'开车');
// 第二种方式,使用Vue.set()
Vue.set(this.student.hobbys,0,'开车');
/* 第三种方式,使用vm.$set()*/
this.$set(this.student.hobby,0,'开车')
}
}
其他方法
五、报错信息
1、Uncaught SyntaxError: Cannot use import statement outside a module
第2章:VueCLI 脚手架
一、安装
第一步(仅第一次执行):全局安装 @vue/cli
npm install -g @vue/cli
第二步:切换到你要创建项目的目录,然后使用命令创建项目
vue create xxxx
第三步:启动项目
npm run serve
二、小Tips
- 如出现下载缓慢请配置 npm 淘宝镜像:
npm config set registry https://registry.npm.taobao.org
- Vue 脚手架隐藏了所有 webpack 相关的配置,若想查看具体的 webpack 配置,请执行如下命令 。就会将脚手架的默认配置生成一个 output.js文件供你查看
vue inspect > output.js
三、分析脚手架结构
- 当我们使用脚手架新建一个项目
vue_demo
时,目录结构如下
assets 存放 png、video等静态资源,
components 存放子组件
脚手架文件结构如下:
- 当我们运行
npm run serve
命令时,系统会去文件中寻找main.js
入口文件,
/*
该文件是整个项目的入口文件
*/
// 引入Vue
import Vue from 'vue'
// 引入APP组件,它是所有组件的父组件
import App from './App.vue'
// 关闭vue的生产提示
Vue.config.productionTip = false
// 创建Vue实例对象—— —— vm
new Vue({
// 下面这行运行代码完成这个功能,将App组件放入容器中
render: h => h(App),
}).$mount('#app')
/*
* .$mount('#app') ==> el:'#app'
*/
- 首先引入
App.vue
文件,在App.vue
文件中再引入components
文件夹下的其他vue
文件,如下
- 在
public
文件夹下找到index.html
,从而启动页面
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<!-- 针对IE浏览器的一个特殊配置,含义是让给IE浏览器以最高的渲染级别渲染页面 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 开启移动端的理想视口 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 配置图标文件的引入,<%= BASE_URL %> ,表示 public目录下-->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 配置网页标题,<%= htmlWebpackPlugin.options.title %>表示package.json中的name -->
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<!-- noscript 表示当浏览器不支持js时noscript钟的元素就会被渲染 -->
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
四、为什么使用render函数
在我们 创建vm
时,使用的new Vue
时,使用常规的new Vue会出现以下错误
new Vue({
el:'app';
template:'<h1>你好啊!</h1>`;
components:{
App
}
})
错误信息中要求我们使用完整版的vue或者使用render函数,由于在开发中使用完整版的vue占用体积相对较大,因此使用render函数【render函数中必须要有返回值】
一般的render函数写为:
render(createElement){
return createElement('h1','你好啊!')
}
经过使用箭头函数的缩写为:
render: h => h('h1','你好啊!')
即,也可以写为:
因此,总结如下
五、修改脚手架中的默认配置
- Vue 脚手架隐藏了所有 webpack 相关的配置,若想查看具体的 webpack 配置,请执行如下命令 。就会将脚手架的默认配置生成一个 output.js文件供你查看
vue inspect > output.js
- 使用vue.config.js可以对脚手架进行个性化定制,详情见:https://cli.vuejs.org/zh
六、ref属性
当我们在APP.vue
中给各标签添加属性获取DOM值操作时,建议使用ref属性,来代替document,getElementById(‘title’)
通过ref
属性获取到的值我们进行打印输出,发现,组件的DOM是组件的实例对象,而标签的DOM是真实DOM
因此,ref
- 被用来给元素或子组件注册引用信息(id的替代者)
- 应用在HTML标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
- 使用方式:
打标识:
<h1 ref="xxx">...<h1>
或<School ref="xxx><School>
获取 :this.$refs.xxx
七、配置项props
props 实现了父组件向子组件传递数据(或方法),父组件中绑定属性(或方法),子组件中利用props接受数据(或方法)。。。若想要子组件向父组件传递数据,可利用方法传递,将参数带到方法中递回给父组件现在有这么一个需求:在复用组件时,组件内的数据可以动态的改变,传入什么就展示什么——这就要用到
props
配置属性
所以,配置项props的功能就是让组件接收外部传过来的数据。
props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么就要求复制props的内容到data中一份,然后去修改data中的数据。
接收数据的方式如下
第一种:简单的声明接收【常用,只接收,对数据无特别要求】
props:['name','age','sex']
第二种:接受的同时对数据进行类型限制
props:{
name:String,
age:Number,
sex:String
}
第三种:接受的同时对数据:进行类型限制 + 默认值的指定 + 必要性的限制
注意:default 与 required不能同时出现
props:{
name:{
type:String, // name 的类型是字符串
required:true, // name 是必要的
},
age:{
type:Number,
default:99 // 默认值
},
sex:{
type:String,
required:true
}
}
八、mixin混入
1、功能:复用配置,可以把多个组件共用的配置提取成一个混入对象,即多个组件共享同一个配置。
2、使用方式:
- 将共用的内容抽取到一个
js
文件中
- 在需要用到的组件中进行引入——局部引入
- 在需要用到的组件中进行引入——全局引入
八、自定义插件
1、定义插件:在plugins.js
文件中定义插件,install()
的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据【可写】
2、使用插件:在main.js
文件中引入插件:import,使用插件:Vue.use()
九、scoped样式管理
在新建组件时,会用到
style
样式,scoped的作用就是让样式在局部生效,防止类名相同引起冲突
十、todo案例
1、思路
2、添加数据——Vue组件中按下回车键获取value值
==安装npm install nanoid
,并在代码中导入并调用nanoid()
函数可以生成随机的id值==
第一种:使用
event
获取数据
<template>
<div>
<input type="text" placeholder="请输入你的信息,按回车键确认" v-model="title" @keyup.enter="add"/>
<div/>
</template>
<script>
import {nanoid} from 'nanoid'
export default {
name:'AddMessage',
methods: {
add(event){
// 将用户的输入包装成一个todo对象
const todoObj = {id:nanoid(),title:event.target.value,done:false)
}
}
}
</script>
第二种:使用
v-model
双向绑定数据
<template>
<div>
<input type="text" placeholder="请输入你的信息,按回车键确认" v-model="title" @keyup.enter="add"/>
<div/>
</template>
<script>
export default {
name:'AddMessage',
data(){
return {
title:''
}
},
methods: {
add(){
// 校验数据
if(!this.title.trim()) return alert('输入不能为空')
// 将用户的输入包装成一个对象
const todoObj = {id:nanoid(),title:this.title,done:false),
// 将输入框的数据进行清除
this.tite = ''
}
}
}
</script>
3、勾选与取消勾选
第一种写法:绑定点击事件
第二种方法:使用
v-model
布尔值的点击绑定修改,但是不推荐使用,因为修改掉了props
4、删除
5、统计已完成与全部完成
第一种:使用foreach循环添加【不推荐使用】
第二种,使用reduce函数实现:
reduce((函数),初始变量接收值,类似于let i=0)
数组的长度为几,reduce中的函数部分就会调用几次。pre
:上一次的值cuurrent
:当前的值使用v-model,但需要get()方法和set()方法同时使用
6、清除已完成的todo
7、总结TodoList案例
==注意:vc中data
、props
、methods
、computed
中的名字不能重名==
十一、浏览器本地存储WebStorage
首先,定义几个button
1、location
2、session
十二、todoList案例中添加本地存储
十三、组件的自定义事件
1、自定义事件_绑定
组件的自定义事件需要子组件向父组件进行传递数据,父组件定义函数(带参),绑定在子组件上,子组件通过props去拿到父组件传递过来的函数进行调用并将参数传递出去,从而试下子——父组件之间的传递
父组件App.vue
除此之外还可以用ref去接受,并在mounted中去触发事件
子组件Student.vue
2、自定义事件_解绑
解绑哪个事件就需要在哪个事件应用的组件上绑定解绑事件
十三、事件总线
想要在兄弟组件中互相传递数据,得用到父组件,但是非常麻烦
因此,学习事件总线可以有效的传递兄弟组件间的数据
首先在main.js文件中的实例对象vm上绑定一个事件如下
第二步在兄弟组件1——Student组件中设置方法将name通过事件总线发射出去
第三步,在兄弟组件2——School组件中的bus总线上绑定事件去接收传过来的数据
十四、消息订阅与发布
1、定义:
是一种组件间通信的方式,使用于任意组件间的通信
2、使用步骤
- 安装pubsub:
npm install pubsub-js
- 引入:
import pubsub from 'pubsub-js'
- 接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身
- 提供数据:
pubsub.publish('xxx',数据)
- 最好在beforeDestroy钩子中,用
PubSub.unsubscribe(pid)
取消订阅
十五、nextTick
- 语法:
this.$nextTick(回调函数)
- 作用:在下一次DOM更新结束后执行其指定的回调
- 什么时候用:当改变数据后,要基于更新后的DOM进行某些操作时,要在nextTick所指定的回调函数中执行
- 案例:在点击编辑下一任务时该任务取消焦点获取,下一任务获得焦点
十六、Vue中封装的过渡与动画
1、效果
向左向右过渡移动的效果
2、实现
<template>
<div>
<button @click="isShow=!isShow">显示/隐藏</button>
<transition name="hello" appear>
<h1 v-show="isShow">{{msg}}</h1>
</transition>
</div>
</template>
<script>
export default {
name: 'Test',
data(){
return{
msg:'你好啊大家!',
isShow:true
}
},
}
</script>
2.1、第一种:使用动画效果实现
1、将要过渡的内容放在<transition>
标签中,添加name
,在使用时对name
进行过渡效果添加,添加apper
表示在页面加载时开始过渡
2、在css中设置@keyframes
中的移动效果
3、利用.hello-enter-active{}
和.hello-leave-active{}
添加进入,离开的效果
<style scoped>
h1{
background-color: orange;
}
.hello-enter-active{
animation: tran 1s linear;
}
.hello-leave-active{
animation: tran 1s linear reverse;
}
@keyframes tran {
from{
transform: translateX(-100%);
}
to{
transform: translateX(0px);
}
}
</style>
2.2、第二种:使用过渡方式
2.3、第三种:使用第三方库实现过渡效果
该库的官网
第一步:安装库:npm install animate.css
第二步:导入库:import 'animated'
第三步:使用:
十七、vue脚手架配置代理
1、方法一
2、方法二
6.6 路由守卫
1、作用:对路由进行权限控制
2、分类:全局守卫、独享守卫、组件内守卫
3、全局守卫
第3章:Vue中的ajax
3.1 解决开发环境Ajax跨域问题
发送Ajax请求的库一般有如下五种:
使用vue-resource
插件时,需要npm install vue-resource
安装,然后引入并使用
3.2 github用户搜索案例
3.2.1 效果
3.2.2 接口地址
https://api.giithub.com/search/users?q=xxx
3.2.3 案例实现
需要三个组件:App.vue
、Search.vue
、List.vue
Search.vue
<template>
<section>
<h3>Search Github users</h3>
<div>
<input type="text" placeholder="enter the name you seaerch" v-model="keyWord"/>
<button @click="searchUsers">Search</button>
</div>
</section>
</template>
<script>
import axios from 'axios'
export default {
name:'Search',
data(){
return {
keyWord:''
}
},
methods: {
searchUsers(){
// 请求前更新List的数据
this.$bus.$emit('updateListData',{isFirst:false,isLoading:true,errMsg:'',users:[]})
axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
response=>{
console.log('请求成功了')
// 请求成功后更新List的数据
this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:response.data.items})
},
error=>{
console.log('请求失败了',error.message)
// 请求失败后更新List的数据
this.$bus.$emit('updateListData',{isLoading:false,errMsg:err,users:[]})
}
)
}
},
}
</script>
List.vue
<template>
<div class="row">
<!--展示用户列表 -->
<div v-show="info.users.length" class="card" v-for="user in info.users" :key="user.login">
<a href="info.user.html_url" target="_blank">
<img src="info.user.avatar_url" style="width:100px"/>
</a>
<p>{{info.user.login}}</p>
</div>
<!-- 展示欢迎词 -->
<h1 v-show="info.isFirst">欢迎使用!</h1>
<!-- 展示加载中 -->
<h1 v-show="info.isLoading">正在加载中。。。</h1>
<!-- 展示错误信息 -->
<h1 v-show="info.errMsg">{{info.errMsg}}</h1>
</div>
</template>
<script>
export default {
name:'List',
data(){
return {
info:{
isFirst:true,//是否初次展示
isLoading:false,//是否处于加载中
errMsg:'',//展示错误信息内容
users:[]
}
}
},
mounted() {
this.$bus.$on('updateListData',(dataObj)=>{
console.log('我是List组件,收到数据')
this.info = {...this.info,...dataObj}
})
},
}
</script>
注意
3.3 slot插槽
第一版:https://blog.csdn.net/qq_53810245/article/details/121707098?spm=1001.2014.3001.5502
3.3.1 作用
让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件 ==> 子组件
3.3.2 分类:默认插槽、具名插槽、作用域插槽
3.3.3 使用方式
1.默认插槽:
2.具名插槽:
3.作用域插槽:
理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定(games数据在Category组件中,但使用数据所遍历出来的结构由APP组件来决定)
第4章:vuex
4.1 理解vuex
4.1.1 vuex是什么
- 概念:专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读 / 写),也是一种组件间通信的方式,且适用于任意组件间通信
- Github地址:https://github.com/vuejs/vuex
4.1.2 什么时候使用Vuex
- 多个组件依赖于同一状态,多个组件需要共享数据时
- 来自不同组件的行为需要变更同一状态
4.1.3 搭建Vuex环境
见到store即见到了Vuex
在main.js
文件中引入并使用,引入并使用后在vm中定义的store就会在vc、vm实例中展现
第一步,安装:npm install vuex@3
第二步,创建
src\store\index.js
文件
// 该文件用于创建 Vuex 中最为核心的store
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 应用 Vuex 插件
Vue.use(Vuex)
// 准备actions——用于响应组件中的动作
const actions = {}
// 准备mutations——用于操作数据(state)
const mutations = {}
// 准备state——用于存储数据
const state = {}
// 创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state,
})
第三步,在main.js
中创建 vm 时传入store
配置项
// 引入 Vue
import Vue from 'vue'
// 引入 APP
import App from './App.vue'
// 引入 插件
import vueResource from 'vuee-resource'
// *****引入 store*****
import store from './store/index'
// 关闭 Vue 的生产提示
Vue.config.productionTip = false
// 使用插件
Vue.use(vueResource)
// 创建 vm
new Vue({
el:'#app',
render: h => h(App),
store,
beforeCreate(){
Vue.prototype.$bus = this
}
})
4.1.4 使用Vuex
第一步,初始化数据、配置actions
、配置mutations
,操作文件store.js
// 该文件用于创建 Vuex 中最为核心的store
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 应用 Vuex 插件
Vue.use(Vuex)
// 准备actions——用于响应组件中的动作
const actions = {
jia:function(context,value){
// console.log('action中的jia被调用',context,value)
console.log(context.commit,value)
context.commit('JIA',value)
},
jian:function(context,value){
// console.log('action中的jia被调用',context,value)
context.commit('JIAN',value)
},
}
// 准备mutations——用于操作数据(state)
const mutations = {
JIA(state,value){
console.log('mutations中的JIA被调用',context,value)
state.sum += value
},
JIAN(state,value){
console.log('mutations中的JIAN被调用',context,value)
state.sum -= value
}
}
// 准备state——用于存储数据
const state = {
sum:0 // 当前的和
}
// 创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state,
})
第二步,组建中读取vuex中的数据:$store.state.sum
第三步,组件中修改vuex中的数据:
$store.dispatch('action中的方法名',数据)
或$store.commit('mutations中的方法名',数据)
备注:若没有网络请求或其他业务罗晋,组件中也可以越过actions,即不写dispatch
,直接编写commit
4.2 vuex模块化管理 + namespace
1、目的:让代码更好维护,让多种数据分类更加明确
2、修改index.js
,首先需要开启命名空间namespace
在src\store\index.js
文件中将actions
、mutations
、state
、getters
抽离在各自相关的配置中
在创建并暴露store时需要将其放在modules中
在src\components\Count.vue
文件中使用时,...mapState
中需要修改为如下
4.3 vuex核心概念和API
第5章:Vue UI组件库
5.1 移动端常用 UI 组件库
1、 Vant :https://youzan.github.io/vant
2、 Cube UI :https://didi.github.io/cube-ui
3、 Mint UI :https://mint-ui.github.io
5.2 PC端常用 UI 组件库
1、 Element UI :https://element.eleme.cn
2、IView UI :https://www.iviewui.com
第6章:vue-router
6.1 相关理解
6.1.1 vue-router 的理解
vue的一个插件库,专门用来实现SPA应用
6.1.2 对SPA应用的理解
- 单页Web应用(single page web application,SPA)。
- 整个应用只有一个完整的页面(index.html)。
- 点击页面中的导航链接不会刷新页面,只会做页面的局部更新。
- 数据需要通过 ajax 请求获取。
6.1.3 路由的理解
1. 什么是路由?
- 一个路由就是一组映射关系(key - value)
- key 为路径, value 可能是 function 或 component
2.路由分类
- 后端路由:
1)理解:value是 function,用于处理客户端提交的请求。
2)工作过程:服务器接收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据。 - 前端路由:
1)理解:value 是 component,用于展示页面内容。
2)工作过程:当浏览器的路径改变时,对应的组件就会显示。
6.2 基本路由
1、基本使用
- 安装
vue-router
,命令npm i vue-router@3
注意:vue-router4
只能用在vue3
中,vue-router3
才能用在vue2
中
main.js
文件中应用插件:Vue.use(VueRouter)
// 引入 Vue
import Vue from 'vue'
// 引入 APP
import App from './App.vue'
// 引入 VueRouter
import VueRouter from 'vue-router'
// 引入路由器
import router from './router'
// 关闭 Vue 的生产提示
Vue.config.productionTip = false
// 应用插件
Vue.use(VueRouter)
// 创建 vm
new Vue({
el:'#app',
render: h => h(App),
beforeCreate(){
Vue.prototype.$bus = this
},
router:router
})
- 编写router配置项:
src\router\index.js
该文件专门用于创建整个应用的路由器
- 实现切换(active-class可配资高亮样式)
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
- 指定展示位置
<!-- 指定组件的呈现位置 -->
<router-view></router-view>
几个注意点:
- 路由组件通常放在
pages
文件夹,一般组件通常放在components
文件夹。 - 通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载。
- 每个组件都有自己的
$route
属性,里面存储着自己的路由信息。 - 整个应用只有一个
router
,可以通过组件的$router
属性获取到。
6.3 嵌套(多级)路由
1、配置路由规则,router\index.js
中使用children
配置项
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
// 创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[ // 通过children配置子路由
{
path:'news', // 此处一定不要写:/news
component:News
},
{
path:'message', // 此处一定不要写:/message
component:Message,
children:[
{
name:'detail',
path:'detail',
component:Detail
}
]
}
]
}
]
})
2、跳转(要写完整路径):<router-link active-class="active" to="/home/news">News</router-link>
6.4 路由传参
1、路由的query参数
拿数据时需要在Detail.vue
组件中使用$route.query.id
2、路由的params参数
2.1、配置路由
2.2、传递参数
2.3、接受参数
特别注意:路由携带params
参数时,若用到to
的对象写法,则不能使用path
配置项,必须使用name
配置项
6.5 命名路由
1、作用:可以简化路由的跳转
2、如何使用
6.6、路由的props配置
作用:让路有组件更加方便的收到参数
1、router\index.js
中配置props
2、Message.vue
中传递props
3、Detail.vue
中使用props
6.7 <router-link>
的replace属性
1、作用:控制路由跳转时操作浏览器历史记录的模式
2、浏览器的历史记录有两种写入方式
分别为push
和replace
,push
是追加历史记录,replace
是替换当前记录。路由跳转时候默认为push
3、如何开启replace
模式
<router-link replace ...>News<router-link/>
6.8 编程式路由导航
1、作用:
不借助<router-link>
实现路由跳转,让路有跳转更加灵活
2、具体编码
push
和replace
方法调用一致
3、其他API
6.9 缓存路由组件
1、作用
让不展示的路由组件保持挂载,不被销毁。
2、具体编码
在哪里需要缓存路由,就在那个组件中加如下代码
6.10 两个新的生命周期钩子
1、作用
路由组件所独有 两个钩子,用于捕获路由组件的激活状态。
2、具体名字
activated
路由组件被激活时触发deactivated
路由组件失活时触发
3、案例
6.11 路由守卫
1、作用:对路由进行权限控制
2、分类:全局守卫、独享守卫、组件内守卫
3、全局守卫
文件router\index.js
,先在路由routes中的meta配置自定义内容
在判断当前路由是否需要权限控制时可使用:
if(to.name === 'news' || to.name === 'message')
if(to.path=== '/home/news' || to.path === '/home/message')
4、独享路由守卫
在想要实现独享路由守卫的路由中配置beforeEnter
独享路由守卫
独享路由守卫只有前置beforeEnter
无后置,要想配置后置路由,得配置全局后置路由
5、组件内路由守卫
在需要监听的组件内进行放置
通过路由规则进入的守卫,进入该组件时被调用
beforeRouterEnter(to,from,next){}
通过路由规则离开的守卫,进入该组件时被调用
beforeRouterLeave(to,from,next){}
6.12 路由器的两种工作模式
1、 hash模式:
1、对于一个url
来说,什么是hash
值?——#
及其后面的内容就是hash
值。
2、hash
值不会包含在HTTP请求中,即:hash
值不会带给服务器。
3、地址中永远带着#
号,不美观。
4、若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记不合法。
5、兼容性较好
2、 history模式:
1、地址干净,美观。
2、兼容性和hash
模式相比略差。
3、应用部署上线时需要后端人员支持,解决刷新页面服务端404
的问题。解决方法如下:
解决history模式下刷新页面服务端404
的问题
详情可见:https://www.npmjs.com/package/connect-history-api-fallback
第一步:安装npm的中间件connect-history-api-fallback
:npm install connect-history-api-fallback
第二步:引入并使用
3、使用:项目上线部署步骤
在router\index.js
文件中配置mode
第一步:将vue项目打包生成dist文件夹:npm run build
第二步:打包出来的项目必须放在服务器上部署一遍才可打开
第三步:使用nodejs搭建本地微型服务器,将项目部署
新建一个空文件夹demo
,
变成一个合法的包:npm init
安装express
:npm install express
资源部署:新建一个文件夹demo\static
,将vue项目中打包生成的文件放到static
文件夹下
新建一个主文件demo\serve.js
,写入如下内容:
// 引入 express
const express = require('express')
// 引入connect-history-api-fallback
const history = require('connect-history-api-fallback');
// 创建app服务于实例对象——直接调用expres()
const app = express()
// 使用connect-history-api-fallback,必须在传入指定资源之前使用
app.use(history())
// 传入指定资源
app.use(express.static(__dirname+'/static'))
// 配置后端路由
app.get('/person',(req,res)=>{
// 给客户端返回数据
res.send({
name:'tom',
age:18
})
})
// 端口监听,(端口号,(错误信息)=>{})
app.listen(5005,(err)=>{
if(!err) console.log('服务器启动成功了!')
})
启动服务器:node server
访问服务器:localhost:5005/person
下一篇:Vuejs项目练习