当前点击的链接默认加了两个class的值router-link-exact-active和router-link-active

自定义类名：

用于定制默认的两个类名

constrouter=newVueRouter({routes:[...],linkActiveClass:"类名1",linkExactActiveClass:"类名2"})2）查询参数传参传递参数：

接受参数：

this.$route.query.参数名3）动态路由传参动态路由后面的参数可以随便起名，但要有语义

配置动态路由：

constrouter=newVueRouter({routes:[...,{path:'/search/:words',component:Search}]})配置导航链接：

对应页面组件接受参数：

this.$route.params.参数名params后面的参数名要和动态路由配置的参数保持一致

/search/:words表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符

constrouter=newVueRouter({routes:[...,{path:'/search/:words',component:Search}]})8、Vue路由1）重定向网页打开时，url默认是/路径，未匹配到组件时，会出现空白

重定向→匹配/后,强制跳转/home路径

{path:匹配路径,redirect:重定向到的路径},//比如：{path:'/',redirect:'/home'}2）404当路径找不到匹配时，给个提示页面。一般都配置在其他路由规则的最后面。

importNotFindfrom'@/views/NotFind'constrouter=newVueRouter({routes:[...{path:'*',component:NotFind}//最后一个]})3）路由模式设置路由的路径看起来不自然,有个#

以后上线需要服务器端支持，开发环境webpack给规避掉了history模式的问题

constrouter=newVueRouter({mode:'history',//默认是hashroutes:[]})9、编程式导航1）path路径跳转不传参：

//简单写法this.$router.push('路由路径')//完整写法this.$router.push({path:'路由路径'})传参：

//1、query传参//简单写法this.$router.push('/路径参数名1=参数值1&参数2=参数值2')//完整写法this.$router.push({path:'/路径',query:{参数名1:'参数值1',参数名2:'参数值2'}})//2、动态路由传参//简单写法this.$router.push('/路径/参数值')//完整写法this.$router.push({path:'/路径/参数值'})2）name命名路由适合path路径长的场景

不传参：

路由规则，必须配置name配置项

{name:'路由名',path:'/path/xxx',component:XXX},通过name来进行跳转

this.$router.push({name:'路由名'})传参：

//1、query传参this.$router.push({name:'路由名字',query:{参数名1:'参数值1',参数名2:'参数值2'}})//2、动态路由传参this.$router.push({name:'路由名字',params:{参数名:'参数值',}})10、二级路由constrouter=newVueRouter({routes:[{path:'/',component:Layout,children:[//children中的配置项跟一级路由中的配置项一模一样{path:'xxxx',component:xxxx.vue},{path:'xxxx',component:xxxx.vue},]}]})这些二级路由对应的组件渲染到哪个一级路由下，children就配置到哪个路由下边

配置了嵌套路由，一定配置对应的路由出口，否则不会渲染出对应的组件

keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

keep-alive是一个抽象组件：它自身不会渲染成一个DOM元素，也不会出现在父组件中。

keep-alive的三个属性：

keep-alive的两个生命周期钩子：

1、安装脚手架

npmi@vue/cli-g2、创建项目

vuecreatedemo3、选自定义

4、选择配置

5、选择vue的版本

6、选择是否使用history模式

7、选择css预处理

8、选择eslint的风格

9、选择校验的时机

10、选择配置文件的生成方式

11、不保存预设

根据错误提示来一项一项手动修正。

如果你不认识命令行中的语法报错是什么意思，你可以根据错误代码去ESLint规则列表中查找其具体含义。

Vuex是一个Vue的状态管理工具，状态就是数据。

Vuex是一个插件，可以帮我们管理Vue通用的数据（多组件共享的数据）

优点：

1、安装vuex

yarnaddvuex@3##npmivuex@32、新建store/index.js专门存放vuex

为了维护项目目录的整洁，在src目录下新建一个store目录其下放置一个index.js文件。

3、创建仓库store/index.js

//导入vueimportVuefrom'vue'//导入vueximportVuexfrom'vuex'//vuex也是vue的插件,需要use一下,进行插件的安装初始化Vue.use(Vuex)//创建仓库storeconststore=newVuex.Store()//导出仓库exportdefaultstore4、在main.js中导入挂载到Vue实例上

importVuefrom'vue'importAppfrom'./App.vue'importstorefrom'./store'Vue.config.productionTip=falsenewVue({render:h=>h(App),store}).$mount('#app')3、state状态State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储。

打开项目中的store.js文件，在state对象中可以添加我们要共享的数据。

//创建仓库storeconststore=newVuex.Store({//state状态,即数据,类似于vue组件中的data,//区别：//1.data是组件自己的数据,//2.state中的数据整个vue项目的组件都能访问到state:{count:101}})访问Vuex中的数据

1、模板中使用

state的数据-{{$store.state.count}}

this.$store.state.xxx3、js文件中使用

//main.jsimportstorefrom"@/store"console.log(store.state.count)4、提供计算属性

state的数据-{{count}}

1、导入mapState(mapState是vuex中的一个函数)

import{mapState}from'vuex'2、采用数组形式引入state属性

mapState(['count'])上面代码的最终得到的是类似于

count(){returnthis.$store.state.count}3、利用展开运算符将导出的状态映射给计算属性

computed:{...mapState(['count'])}

通过strict:true可以开启严格模式，开启严格模式后，直接修改state中的值会报错。

state数据的修改只能通过mutations，并且mutations必须是同步的

mutations是一个对象，对象中存放修改state的方法。mutations必须是同步的。

1、定义mutations

conststore=newVuex.Store({//定义mutationsmutations:{}})2、组件中提交mutations

this.$store.commit('addCount')2）带参数的mutations1、定义mutations（带参数）

conststore=newVuex.Store({addCount(state,count){state.count=count}})2、组件中提交mutations

this.$store.commit('addCount',10)提交的参数只能是一个，如果有多个参数要传，可以传递一个对象

this.$store.commit('addCount',{count:10})3）mapMutationsmapMutations类似于mapState，把位于mutations中的方法提取了出来

import{mapMutations}from'vuex'methods:{...mapMutations(['addCount'])}7、actions1）actionsstate是存放数据的，mutations是同步更新数据(便于监测数据的变化，更新视图等，方便于调试工具查看变化)

actions则负责进行异步操作

1、

mutations:{changeCount(state,newCount){state.count=newCount}}actions:{setAsyncCount(context,num){//一秒后,给一个数,去修改numsetTimeout(()=>{context.commit('changeCount',num)},1000)}}2、组件中通过dispatch调用

mapActions是把位于actions中的方法提取了出来，映射到组件methods中

import{mapActions}from'vuex'methods:{...mapActions(['changeCountAction'])}8、getters1）getters除了state之外，有时我们还需要从state中筛选出符合条件的一些数据（类似于computed计算属性），这些数据是依赖state的，此时会用到getters

1、定义getters

getters:{//getters函数的第一个参数是state//必须要有返回值filterList:state=>state.list.filter(item=>item>5)}2、使用getters

如果把所有的状态都放在state中，当项目变得越来越大的时候，Vuex会变得越来越难以维护

1、准备user模块modules/user.js

conststate={userInfo:{name:'zs',age:18}}constmutations={}constactions={}constgetters={}exportdefault{state,mutations,actions,getters}2、在store/index.js文件中的modules配置项中，注册模块

importuserfrom'./modules/user'conststore=newVuex.Store({modules:{user}})数据的访问：

this.$store.state.模块名.xxx2）state模块化尽管已经分模块了，但其实子模块的状态，还是会挂到根级别的state中，属性名就是模块名

exportdefault{namespaced:true,...}3）getters模块化直接通过模块名访问$store.getters['模块名/xxx']通过mapGetters映射默认根级别的映射mapGetters(['xxx'])子模块的映射mapGetters('模块名',['xxx'])（需要开启命名空间）4）mutations模块化直接通过store调用$store.commit('模块名/xxx',额外参数)通过mapMutations映射默认根级别的映射mapMutations(['xxx'])子模块的映射mapMutations('模块名',['xxx'])（需要开启命名空间）5）actions模块化直接通过store调用$store.dispatch('模块名/xxx',额外参数)通过mapActions映射默认根级别的映射mapActions(['xxx'])子模块的映射mapActions('模块名',['xxx'])（需要开启命名空间）10、补：json-serverjson-server用于模拟后端接口服务环境

1、安装全局工具json-server（全局工具仅需要安装一次）

yarnglobaladdjson-servernpmijson-server-g2、代码根目录新建一个db目录

3、将资料index.json移入db目录

4、进入db目录，执行命令，启动后端接口服务(使用--watch参数可以实时监听json文件的修改)

json-server--watchindex.json十四、打包优化1、publicPath默认情况下，需要放到服务器根目录打开，如果希望双击运行，需要配置publicPath配成相对路径

当打包构建应用时，Javascript包会变得非常大影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。