篇章九（3）Vuejs补充版

博客zhu虎康

已于 2023-06-09 09:05:13 修改

阅读量1.0k

点赞数 1

分类专栏： Vuejs 前端知识图谱文章标签： vue

于 2022-01-28 22:37:33 首次发布

本文链接：https://blog.csdn.net/qq_53810245/article/details/122737590

版权

Vuejs 同时被 2 个专栏收录

33 篇文章 2 订阅

订阅专栏

前端知识图谱

22 篇文章 2 订阅

订阅专栏

一直在路上，从未停止前进【一直在更新中。。。】

上一篇：Vuejs基础版

上一篇：Vuejs进阶版

Vuejs补充版

第一章：Vue组件化编程
第2章：VueCLI 脚手架
第3章：Vue中的ajax
第4章：vuex
第5章：Vue UI组件库
- 5.1 移动端常用 UI 组件库
- 5.2 PC端常用 UI 组件库
第6章：vue-router

第一章：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"/>&nbsp;
        <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('服务器启动成功了!')
})