尚硅谷Vue2学习笔记 (二)

脚手架文件结构

node_modules
public
    favicon.ico 页签图标
    index.html 主页面
src
    assets 存放静态资源
        logo.png 
    component 存放组件
        HelloWorld.vue
    App.vue 汇总所有组件
    main.js 入口文件
.gitignore git版本管理忽略文件
babel.config.js babel配置文件 (ps:babel可以将es6+语法转换为浏览器兼容的语法)
package.json 应用包配置文件
README.md 应用描述文件
package.lock.json 包版本控制文件

不能改的目录名及文件名:public、favicon.ico、index.html、src、main.js
不能改的目录名及文件名:public、favicon.ico、index.html、src、main.js

关于不同版本的Vue的说明

  • vue.js 与 vue.xxx.js的区别:
    vue.js是完整版的Vue,包含:核心功能+模板解析器
    vue.runtime.xxx.js是运行版的Vue,只包含:核心功能,没有模板解析器

  • 因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用render函数接收到的createElement函数去指定具体内容

  • ps:开发的时候需要模板解析器,上线的时候不再需要模板解析器,所以vue提供了精简版的运行版Vue,可以减少打包后的体积,节省空间

vue.config.js配置文件

vue inspect > output.js 查看webpack.config.js文件的配置(只读)

ref属性

  1. 被用来给元素或子组件注册引用信息(id替代者)
  2. 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
  3. 使用方式:
    打标识:

    ...

    ...
    获取:this.$refs.xxx

配置项props

  • 功能:让组件接收外部传过来的数据

1.传递数据

<Demo name="xxx" age="xxx"> // 此时,xxx是字符串
<Demo :name="yyy" :age="yyy"> // 此时,yyy是js表达式

2.接收数据

第一种方式(只接收)

props: ['name', 'age']

第二种方式(限制数据类型)

props: {
    name: String,
    age: Number
}

第三种方式(限制数据类型、限制必要性、指定默认值)

props: {
    name: {
        type: String, // 类型
        required: true // 必要性
    }
    age: {
        type: Number,
        default: 99 // 默认值
    }
}

备注:

  1. props是只读的,Vue底层会监测对props的修改,如果进行了修改,就会发出警告;
    若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去data中修改
  2. 通过props接收到的数据,优先级比data中的数据高,如果同时指定props和data中的同名数据,会优先显示props传过来的

mixin(混入/混合)

  • 功能:可以把多个组件共用的配置提取成一个混入对象

  • 使用方式:

  1. 定义混合,并暴露,例如:
export const mixin = {
    data() {...},
    methods: {...},
    ...
}
  1. 导入使用混合,例如:
// 导入混合
import { xxx } from '文件路径'
  • 使用混合——全局混入
Vue.mixin(xxx)
  • 使用混合——局部混入
mixins: ['xxx']

插件plugins

  • 功能:用于增强Vue

  • 本质:包含install方法的一个对象,install的第一个参数是Vue构造函数,第二个以后的参数是插件使用者传递的数据

  • 定义插件(别忘了暴露出去):

对象.install = function(Vue, options) {
    // 可以添加全局过滤器
    Vue.filter(...)

    // 可以添加全局指令
    Vue.directive(...)

    // 可以配置全局混入
    Vue.mixin(...)

    // 可以给Vue原型上添加方法、属性
    Vue.prototype.方法名 = function() {}
    Vue.prototype.属性名 = xxx
}
export { 对象 }

// 简写
export default {
    install() {
        ...
    }
}
  • 引入、使用插件
import xxx from '文件路径' // 默认导出的导入
import { xxx } from '文件路径' // 命名导出的导入

Vue.use(xxx)

scoped样式

  • 作用:让样式在局部生效,防止冲突

  • 写法:

TodoList案例

组件化编码流程

1. 拆分静态组件

通常按照功能点来拆分组件,命名不要与html元素冲突

2. 实现动态组件

  • 数据的类型、名称是什么?
    对象数组(对象属性:id、事情名称、是否完成)

  • 数据存放位置?

    (1). 一个组件在用:放在组件自身即可

    (2). 一些组件在用:放在它们共同的父组件上(状态提升)

3. 实现交互:从绑定事件开始

注意点

  • props适用于:

    父组件 ==> 子组件 通信

    子组件 ==> 父组件 通信(要求父组件先给子组件一个函数)

    目前所学知识只能支持从父组件传递数据给子组件(props)
    !但可以通过以下方式从子组件传递数据给父组件:
    第一步:父组件传递一个函数rec给子组件,子组件通过props接收,这个函数就会出现在子组件实例对象上
    第二步:子组件可以调用rec函数,将想要传递给父组件的数据作为参数传给父组件

  • 使用v-model时要切记:v-model绑定的值不能是props传过来的值,因为props是不可以修改的

  • props传过来的若是对象类型的值,修改对象中的属性时Vue不会报错,但不推荐这样做

webStorage

  1. 存储内容大小一般支持5MB左右(不同浏览器可能不一样)

  2. 浏览器端通过 window.sessionStoragewindow.localStorage 属性来实现本地存储机制

  3. 相关API:

    • xxxxxStorage.setItem('key', 'value')

    该方法接收一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值

    • xxxxxStorage.getItem('key')

    该方法接收一个键名作为参数,返回键名对应的值

    • xxxxxStorage.removeItem('key')

    该方法接收一个键名作为参数,并把该键名从存储中删除

    • xxxxxStorage.clear()

    该方法会清空存储中所有数据

  4. 备注

    • sessionStorage存储的内容会随着浏览器窗口关闭而消失

    • localStorage存储的内容,需要手动清除才会消失,不会随着浏览器窗口关闭而消失

    • xxxxxStorage.getItem('key') 如果key对应的value获取不到,那么getItem的返回值是null

    • 存储对象类型的数据时,需要先转换成JSON字符串再存储:

      xxxxxStorage.setItem('key', JSON.stringify(obj))

    • 读取对象类型的数据时,需要将读取出来的JSON字符串转换成对象类型:JSON.parse(xxxxxStorage.setItem('key'))

    • JSON.parse(null) 的结果依然是null

组件的自定义事件

  1. 一种组件间通信的方式,适用于:子组件 ===> 父组件

  2. 使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件**(事件回调在A中**)

  3. 绑定自定义事件:

  • 第1种方式:在父组件中:
<子组件名 v-on:自定义事件名="事件回调函数" /> 
<子组件名 @自定义事件名="事件回调函数" /> // 简写
  • 第2种方式:在父组件中:
<子组件名 ref="demo" />
...
mounted() {
    this.$refs.demo.$on('自定义事件名', this.事件回调函数名)
}
// 注意事件回调要写在methods里,不能写在$on方法中,因为this会指向子组件实例对象,除非用箭头函数
  • 若想让自定义事件只能触发一次,可以使用once事件修饰符,或$once方法
<子组件名 @自定义事件名.once="事件回调函数" /> // once修饰符
this.$refs.demo.$on('自定义事件名', this.事件回调函数名) // $once方法
  1. 触发自定义事件(在子组件中触发)
this.$emit('自定义事件名', 数据)
  1. 解绑自定义事件
this.$off('自定义事件名') // 解绑1个自定义事件
this.$off(['自定义事件1', '自定义事件2', ...]) // 解绑多个自定义事件
this.$off() // 解绑组件的所有自定义事件
  1. 组件上也可以绑定原生DOM事件,需要使用native事件修饰符,否则会被解析为自定义事件
  2. 再次注意:通过this.$refs.子组件名.$on('自定义事件名', 事件回调) 绑定自定义事件时,回调函数要么配置在methods中,要么直接箭头函数在$on方法里写,否则this指向会出问题!

全局事件总线

  1. 一种组件间通信的方式,适用于任意组件间通信

  2. 安装全局事件总线:

new Vue({
    ....
    beforeCreate() {
        Vue.prototype.$bus = this // 安装全局事件总线,$bus就是当前应用的vm
    }
})
  1. 使用事件总线
  • 接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调函数留在A组件自身
methods: {
    demo(data) {}
},
...
mounted() {
    this.$bus.$on('事件名', this.demo)
}
  • 提供数据
this.$bus.$emit('事件名', 数据)
  1. 最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件
beforeDestroy() {
    this.$bus.$off('事件名')
}

消息订阅与发布(pubsub)

  1. 一种组件间通信的方式,适用于任意组件间通信

  2. 使用步骤:

  • 安装pubsub: npm i pubsub

  • 引入:import pubsub from 'pubsub-js'

  • 接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调函数留在A组件自身

methods: {
    demo(data) {}
}
...
mounted() {
    this.pid = pubsub.subscribe('消息名', this.demo) // 订阅消息
}
  • 提供数据: pubsub.publish('消息名', 数据)
  1. 最好在beforeDestroy钩子中,用 pubsub.unsubscribe(pid) 取消订阅

nextTick

  1. 语法:this.$nextTick(回调函数)
  2. 作用:在下一次DOM节点更新结束后执行回调函数
  3. 应用场景:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行

Vue封装的过渡与动画

  1. 作用:在插入、更新或移除DOM元素时,在合适的时候给元素增加样式类名
  2. 过渡写法:
  • 准备好样式

    元素进入的样式

    v-enter 进入的起点

    v-enter-active 进入过程中

    v-enter-to 进入的终点

    元素离开的样式

    v-leave 离开的起点

    v-leave-active 离开过程中

    v-leave-to 离开的终点

  • 使用 包裹要过渡的元素,并配置name属性

<transition name="hello">
	<h1 v-show="isShow">你好啊h1>
transition>
  • 备注:若有多个元素需要过渡,需要使用 包裹,且每个元素都要指定key值
  1. 动画写法:

只需要指定 v-enter-activev-leave-active 的样式以及定义动画:

@keyframes 动画名 {
    from{
        ...
    }
    to {
        ...
    }
}

发Ajax请求的几种方式:

  1. XMLHttpRequest
  2. jQuery(封装xhr)
  3. axios(封装xhr)
  4. fetch
  5. vue-resource(封装xhr)

Vue cli(脚手架)配置代理

方法一

在Vue.config.js中添加如下配置:

devServer: {
	// 请求的url
    proxy: "http://localhost:5000"
}
  • 说明:
  1. 优点:配置简单,请求资源时直接发给前端(8080)即可
  2. 缺点:不能配置多个代理,不能灵活地控制请求是否走代理
  3. 工作方式:若按照上述配置代理,当请求前端存在的资源时,该请求会直接返回前端资源,不会转发给服务器;只有当请求了前端不存在的资源时,那么该请求会转发给服务器(优先匹配前端资源)

方法二

编写Vue.config.js配置具体代理规则:

module.exports = {
    ...
    devServer: {
        proxy: {
            '/api1': { // 匹配所有以 '/api1' 开头的请求路径
                target: 'http://localhost:5000', // 代理目标的基础路径
                pathRewrite: {'^/api1': ''},
                ws: true, // 用于支持websocket
                changeOrigin: true // 用于控制请求头中的host值
            },

            '/api2': { // 匹配所有以 '/api2' 开头的请求路径
                target: 'http://localhost:5001', // 代理目标的基础路径
                pathRewrite: {'^/api2': ''}, 
                ws: true, // 用于支持websocket
                changeOrigin: true // 用于控制请求头中的host值
            }
        }
    }
}

/*
changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000(被请求的服务器的host)
changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080(实际的host)
changeOrigin默认值为true
*/
  • 说明:
    1. 优点:可以配置多个代理,且可以灵活地控制请求是否走代理
    2. 缺点:配置略微繁琐,请求资源时必须加前缀

注意:前端发送请求时,url要写代理服务器的主机名和端口 + 请求的具体路径 (例如 /students),

如果用第二种方式配置代理服务器还要加上前缀 (例如 http://localhost:8080/api1/students)

插槽

  1. 作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信方式

    适用于 父组件 ===> 子组件

  2. 分类:默认插槽、具名插槽、作用域插槽

  3. 使用方式

  • 默认插槽
// 父组件中:
<Category>
	<div>html结构div>
Category>

// 子组件中:
<template>
	<div>
		
     	<slot>插槽默认内容slot>
	div>
template>
  • 具名插槽
// 父组件中:
<Category>
	<template slot="center">
		<div>html结构1div>
	template>
	
	<template v-slot="footer">
		<div>html结构2div>
	template>
Category>

// 子组件中:
<template>
    <div>
        
        <slot name="center">插槽默认内容1slot>
       	<slot name="footer">插槽默认内容2slot>
    div>
template>
  • 作用域插槽

    理解:数据在组件本身,当根据数据生成的结构需要组件的使用者来决定。

    (games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定)

// 父组件中:
<Category>
    <template slot="scopeData">
        
        <ul>
            <li v-for="(g, index) in scopeData.games" :key="index">{{g}}li>
        ul>
    template>

    <template slot-scope="scopeData">
        
        <h4 v-for="(g, index) in scopeData.games" :key="index">{{g}}h4>
    template>
Category>

// 子组件中:
<template>
    <div>
        
        <slot :games="games">插槽默认内容slot>
    div>
template>

<script>
    export default {
        name: 'Category',
        props: ['title'],
        data() {
            return {
                // 数据在子组件自身
                games: ['红色警戒', '和平精英', '羊了个羊', '合成大西瓜'],
            }
        }
    }
script>

备注:作用域插槽也可以起名name

vuex

**概念:**专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对Vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信

应用场景:多个组件需要共享数据时(多个组件依赖于同一状态、来自不同组件的行为需要变更同一状态)

搭建vuex环境

  1. 创建文件:src/store/index.js
// 引入Vue核心库
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
})
  1. main.js中创建vm时传入store配置项
...
// 引入store
import store from './store'

// 创建vm
new vue({
    el: '#app',
    render: h => h(App),
    store,
})

基本使用

  1. 初始化数据,配置 actions,配置 mutations,操作文件 src/store/index.js
// 引入vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 使用vuex插件
Vue.use(Vuex)

// 准备actions——用于响应组件中的动作
const actions = {
    incrementOdd(context, value) {
        if (context.state.sum % 2) {
            context.commit('INCREMENTODD', value)
        }
    },
}
// 准备mutations——用于操作数据(state)
const mutations = {
    INCREMENTODD(state, value) {
        state.sum += value
        
    },
}
// 准备state——用于存储数据
const state = {
    sum: 0 // 和
}
  1. 组件中读取vuex中的数据:$store.state.变量名

  2. 组件中修改vuex中的值:¥store.dispatch('actions中的方法名', 数据)$store.commit('mutations中的方法名', 数据)

    备注:若没有网络请求或其他业务逻辑,组件中可以越过 actions:即不写 dispatch,直接编写 commit

getters的使用

  1. 概念:当state中的数据需要经过加工后使用时,可以使用getters加工

  2. src/store/index.js 中追加 getters 配置

    ......
    
    const getters = {
        bogSum() {
            return state.sum * 10
        }
    }
    
    // 创建并导出store
    export default new Vuex.Store({
        ...
        getters,
    })
    
  3. 组件中读取数据:$store.getters.bigSum

4个map方法的使用

  1. mapState方法:用于映射 State 中的数据为计算属性

    import { mapState } from 'vuex'
    ...
    computed: {
        ...
        // 借助mapState生成计算属性,从state中读取数据(对象写法)
        ...mapState({he: 'sum', xuexiao: 'school', xueke: 'subject'}),
    
        // 借助mapState生成计算属性,从state中读取数据(数组写法)
        ...mapState(['sum', 'school', 'subject']),	
    }
    
  2. mapGetters方法:用于映射 getters 中的数据为计算属性

    import { mapGetters } from 'vuex'
    ...
    computed: {
        // 借助mapGetters生成计算属性,从getters中读取数据(对象写法)
        ...mapGetters({bigSum: 'bigSum'})
        
        // 借助mapGetters生成计算属性,从getters中读取数据(数组写法)
        ...mapGetters(['bigSum'])
    }
    
  3. mapActions方法:用于生成与 actions 对话的方法,即:包含 $store.dispatch(xxx) 的函数

    import { mapActions } from 'vuex'
    ...
    methods: {
        // 借助mapActions生成对应方法,方法中会调用dispatch去联系actions(对象写法)
       	...mapActions({jiaOdd: 'incrementOdd', jiaWait: 'incrementWait'}),
    
        // 借助mapActions生成对应方法,方法中会调用dispatch去联系actions(对象写法)
        ...mapActions(['incrementOdd', 'incrementWait']),
    }
    
  4. mapMutations方法:用于生成与mutations 对话的方法,即:包含 $store.commit(xxx) 的函数

    import { mapMutations } from 'vuex'
    ...
    methods: {
        // 借助mapMutations生成对应方法,方法中会调用commit去联系mutations(对象写法)
        ...mapMutations({increment: 'INCREMENT', decrement: 'DECREMENT'}),
    
        // 借助mapMutations生成对应方法,方法中会调用commit去联系mutations(对象写法)
        ...mapMutations(['INCREMENT', 'DECREMENT']),
    }
    

    注意:mapActions 与 mapMutations 使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象

模块化+命名空间

  1. 目的:让代码更好维护,让多种数据分类更加明确

  2. 修改 store.js

    const countAbout = {
        namespaced: true, // 开启命名空间
        state: {...},
        actions: {...},
        mutations: {...},
        getters: {
            bigSum() {
                return state.sum * 10
            }
        },
    }
    
    const personAbout = {
        namespaced: true, // 开启命名空间
        state: {...},
        actions: {...},
        mutations: {...},
        getters: {...},
    }
    
    const store = new Vuex.Store({
        modules: {
            countAbout, // 对象属性简写机制
            personAbout
        }
    })
    
    
  3. 开启命名空间后,组件中读取state数据:

    // 方式一:直接读取state
    this.$store.state.countAbout.sum
    this.$store.state.countAbout.school
    this.$store.state.countAbout.subject
    
    // 方式二:借助mapState
    ...mapState('countAbout', ['sum', 'school', 'subject'])
    
  4. 开启命名空间后,组件中读取getters数据:

    // 方式一:直接读取getters
    this.$store.getters['countAbout/bigSum']
    // 方式二:借助mapGetters
    ...mapGetters('countAbout', ['bigSum'])
    
  5. 开启命名空间后,组件中调用dispatch

    // 方式一:直接dispatch
    this.$store.dispatch('countAbout/incrementOdd', this.n)
    this.$store.dispatch('countAbout/incrementWait', this.n)
    // 方式二:借助mapActions
    ...mapActions('countAbout', ['incrementOdd', 'incrementWait'])
    
  6. 开启命名空间后,组件中调用commit

    methods: {
        // 方式一:直接commit
        this.$store.commit('countAbout/INCREMENT', this.n)
        this.$store.commit('countAbout/DECREMENT', this.n)
        // 方式二:借助mapMutations
        ...mapActions('countAbout', {increment: 'INCREMENT', decrement: 'DECREMENT'})
    }
    

路由

概念

路由 (route)

路由就是一组 key-value 的对应关系,key为路径,value为 function 或 component

多个路由 (route) 需要经过路由器 (router) 的管理

路由分类

  1. 后端路由

    value 是 function,用于处理客户端处理的请求

    工作过程:服务器接收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据

  2. 前端路由

    value 是 component,用于展示页面内容

    工作过程:当浏览器的路径改变时,对应的组件就会显示

vue-router

vue的一个插件库,专门用来实现SPA应用(单页面应用)

对SPA应用的理解:

  1. 单页Web应用(single page web application, SPA)
  2. 整个应用只有一个完整的页面
  3. 点击页面中的导航链接不会刷新页面,只会做页面的局部更新
  4. 数据需要通过ajax请求获取

基本使用

  1. 安装vue-router,npm i vue-router@3

  2. src/router/index.js 下编写router配置项

    // 引入VueRouter
    import VueRouter from 'vue-router'
    
    // 引入组件
    import Home from '../components/Home'
    import Home from '../components/Home'
    
    // 创建并导出router实例对象,管理一组一组的路由规则
    export default new VueRouter({
        routes: [
            {
                path: '/home',
                component: Home
            },
            {
                path: '/about',
                component: About
            }
        ]
    })
    
  3. 在main.js 中引入并应用插件,引入配置好的路由器:

    import VueRouter from 'vue-router'

    Vue.use(VueRouter)

    import router from './router'

  4. 实现切换(active-class可配置切换样式、to配置url)

    <router-link active-class="active" to="/about">Aboutrouter-link>
    
  5. 指定组件展示位置

    <router-view>router-view>
    

几个注意点:

  1. 路由组件通常存放在 pages 文件夹,一般组件通常存放在 components 文件夹
  2. 通过切换,"隐藏"了的路由组件,默认是被销毁的,需要的时候再去挂载
  3. 每个组件都有自己的 $route 属性,里面存储着自己的路由信息,不同组件的 $route 不同
  4. 整个应用只有一个router,可以通过组件的 $router 属性获取到

嵌套路由(多级路由)

  1. 配置路由规则,使用 children 配置项

    routes: [
    	{
            path: '/home',
            component: Home
            children: [
                {
                    path: 'news', // 不要写 / 
                    component: News
                },
                {
                    path: 'message', // 不要写 / 
                    component: Message
                }
            ]
        },
        {
            path: '/about',
            component: About,
        },
    ]
    
  2. 跳转(要写完整路径):

    <router-link to="/home/news">Newsrouter-link>
    <router-link to="/home/message">Messagerouter-link>
    

路由的query参数

  1. 传递参数

    
    <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">查看消息router-link>
    
    
    <router-link :to="{
        path: '/home/message/detail',
        query: {
            id: m.id,
            title: m.title
        }
    }">查看消息router-link>
    
  2. 接收参数

    ...
    <li>消息的编号:{{$route.query.id}}li>
    <li>消息的标题:{{$route.query.title}}li>
    

命名路由

  1. 作用:可以简化路由的跳转

  2. 如何使用

    1. 给路由命名,再 src/router/index.js 中配置

      {
          path: '/demo',
          component: Demo,
          children: [
              {
                  path: 'test',
                  component: Test,
                  children: [
                      {
                          name: 'hello', // 给路由命名
                          path: 'welcome',
                          component: Hello,
                      }
                  ]
              } 
          ]
      }
      
    2. 简化跳转

      
      <router-link to="/demo/test/welcome">跳转router-link>
      
      
      <router-link :to="{name: 'hello'}">跳转router-link>
      
      
      <router-link
          :to="{
          		name: 'hello',
          		query: {
                        id: 666,
                        title: '你好',
          		}
          }"
      >跳转router-link>
      

路由的params参数

  1. 配置路由

    routes: {
       path: '/home',
       component: Home,
       children: [
           {
               path: 'news',
               component: News
           },
           {
               path: 'Message',
               component: Message,
               children: [
                   {
                       name: 'xiangqing',
                       path: 'detail/:id/:title', // 使用占位符声明接收params参数
                       component: Detail
                   }
               ]
           }
       ]
    }
    

  2. 传递参数

    
    <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}router-link>
    
    
    <router-link :to="{
        name: 'xiangqing', // 携带params参数只能用name,不能用path
        params: {
            id: m.id,
            title: m.title
        }
    }"
    >{{m.title}}router-link>
    

    特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置项

  3. 接收参数
    $route.params.id
    $route.params.title

路由的props配置

作用:让路由组件更加方便地收到参数

{
    name: 'xiangqing',
    path: 'detail/:id/:title',
    component: Detail,
    
    // 第1种写法,props值为对象,该对象中所有的key-value的组合最终都会通过props传给Detail组件
    props: {a: 1, b: 'hello'},
    
    // 第2种写法,props值为布尔值,把路由收到的所有params参数通过props传给Detail组件
    props: true,
    
    // 第3种写法,props值为函数,该函数返回的对象中每一组key-value组合都会通过props传给Detail组件
    props($route) {
        return {
            id: $route.query.id,
            title: $route.query.title
        }
    },
    
    //利用解构赋值
    props({query}) {
    	return {id: query.id, title: query.title}
    },

    // 不推荐(可读性差)
    props({query: {id, title}}) {
        return {id, title}
    },
}

router-link 的 replace 属性

  1. 作用:控制路由跳转时操作浏览器历史记录的模式

  2. 浏览器的历史记录有2种写入方式:pushreplacepush追加历史记录replace替换当前记录,路由跳转时默认为 push

  3. 如何开启 replace 模式:

    
    <router-link :replace="true" ......>Aboutrouter-link>
    
    
    <router-link replace ......>Homerouter-link>
    

编程式路由导航

  1. 作用:不借助 router-link 实现路由跳转,让路由跳转更加灵活

  2. 代码:

    // push跳转
    this.$router.push({
        name: 'xiangqing',
        params: {
            ...
        },
    })
    
    // replace跳转
    this.$router.replace({
        path: '/home/message/detail',
        params: {
        	...
    	}
    })
        
    // forward前进
    this.$router.forward()
    
    // back后退
    this.$router.back()
    
    // go可前进也可后退,需要指定前进/后退的步数
    this.$router.go(n)
    

缓存路由组件

  1. 作用:让不展示的路由组件保持挂载,不被销毁

  2. 代码:

    
    <keep-alive include="News">
    	<router-view>router-view>
    keep-alive>
    
    
    <keep-alive :include="['News', 'Message]">
    	<router-view>router-view>
    keep-alive>
    
  3. 注意:

    1. 如果不写include,默认 keep-alive 包裹的所有路由组件都不被销毁
    2. include里面写的是组件名,指定哪个组件保持挂载,不被销毁

2个新的生命周期钩子

  1. 作用:路由组件所独有的钩子,用于捕获路由组件的激活状态

  2. 使用:

    activated() {
        // 路由组件被激活时触发
    },
        
    deactivated() {
    	// 路由组件失活时触发
    }
    

  3. 复习所有的生命周期钩子:

    beforeCreate:vm被创建,生命周期、事件初始化,但数据监测、数据代理还未开始

    created:已经做完了数据监测、数据代理,可以用vm访问data、methods

    beforeMount:页面显示的是未经Vue编译的DOM结构

    mounted:Vue解析模板,生成了虚拟DOM,将内存中的虚拟DOM转为真实DOM并挂载到了页面上

    beforeUpdate:更新了数据,但Vue未将根据新数据生成的DOM挂载到页面上

    updated:Vue根据新数据生成新的虚拟DOM,与旧的DOM进行diff比较,将新的真实DOM挂载到了页面上

    beforeDestroy:vm/组件实例对象被销毁之前

    destroyed:vm/组件实例对象被销毁之后

    nextTick:下一次DOM节点更新结束后:即更新了数据,Vue修改DOM并挂载完毕后

    activated:路由组件被激活

    deactived:路由组件失活

路由守卫

  1. 作用:对路由进行权限控制

  2. 分类:全局守卫、独享守卫、组件内守卫

  3. 全局守卫

    // 全局前置路由守卫——初始化时、每次路由切换之前会被调用
    router.beforeEach((to, from, next) => {
        console.log('前置路由守卫', to, from)
    
        if (to.meta.isAuth) { // 判断是否需要验证权限,需要在每个route中配置meta对象
            if (localStorage.getItem('school') === 'fzu') {
                next()
            } else {
                alert('当前学校无权限查看!')
            }
        } else {
            next()
        }
    })
    
    
    
    // 全局后置路由守卫——初始化时、每次路由切换之后会被调用
    router.afterEach((to, from) => {
        console.log('后置路由守卫', to, from)
        document.title = to.meta.title || 'Vue学习'
    })
    
    export default router
    
  4. 独享守卫

    route: [
    ...
    {
        name: 'xinwen',
        ... 
        meta: {isAuth: true, title: '新闻'},
        
        // 独享路由守卫
        beforeEnter: (to, from, next) => {
            if (to.meta.isAuth) {
                if (localStorage.getItem('school') === 'fzu') {
                    next()
                } else {
                    alert('您无权查看新闻!')
                }
            } else {
                next()
            }
        },
    }
    ]
    

    注意: 独享路由守卫只有一种 beforeEnter

  5. 组件内守卫

    // 进入守卫:通过路由规则进入该组件时被调用
    beforeRouteEnter (to, from, next) {
        ...
    },
    
    // 离开守卫:通过路由规则离开该组件时被调用
    afterRouteLeave (to, from, next) {
        ...
    }
    

路由器的2种工作模式

  1. 对于一个 url 来说,# 以及后面的内容都是 hash 值

  2. hash值不会包含在http请求中,即:不会随着http请求发给服务器

  3. hash模式:

    1. 地址中永远带着 # ,不美观
    2. 若以后将地址通过第三方手机app分享,若app校验严格,地址会被标记为不合法
    3. 兼容性较好

  4. history模式:

    1. 地址干净美观
    2. 兼容性与hash模式相比略差
    3. 应用部署上线后需要后端人员解决刷新页面服务端404的问题

Vue UI 组件库

移动端常用 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
  4. Nut UI https://nutui.jd.com/#/

PC 端常用 UI 组件库

  1. Element UI https://element.eleme.cn (基于Vue)
  2. IView UI https://www.iviewui.com

你可能感兴趣的:(学习,javascript,vue.js)