Vuex+Vue-router+补充(官方文档+Router版本)

11.1内容整理和概述

今日内容概要

内容目录

• Vuex
• Vue-router
• 战略补充

Vuex

Vuex：	# 状态管理器
	本质：vue的插件，增强了vue的功能
	功能：对数据进行集中管理共享，实现组件间通信，且适用于任意组件间通信

Vuex组成：
	state：存储数据的地址
	actions：服务中转站
	mutations：修改state数据的地方

使用流程：
	1.在state中定义变量
	2.在组件中通过this.$store.dispatch('actions中定义的函数')，触发actions中的函数执行
	3.在actions中得函数中，调用 context.commit('mutations中定义的函数')，触发mutations中的函数执行
		补充：
			1.actions内的函数第一个参数是上下文
	4.在mutations中定义的函数实现真正的修改state中得数据
	5.页面中只要使用$store.state.变量，如果变量变化，页面就变化	# 实现组件间通信

补充：
	1.Vuex在组件中可以直接调用commit触发	# 不推荐
	2.Vuex在组件中可以直接修改state中定义变量	# 不推荐

Vue-router

router： 官方提供的用来实现SPA的vue插件		# SPA：单页面应用
功能：在单页面中通过地址栏不同的路径显示不同的页面组件

使用步骤：
	1.在router/index.js进行路由的配置
	2.在routes添加路由，数据类型为数组套对象
		路由参数：
			1.path：url链接	# 例子：path:'/goods'
			2.name：当前路由名	# 例子：name:'goods'
			3.component：组件名		# 例子：component:Goods
	3.main.js的Vue对象已经导入了router	# 没有的话自己导
	4.在需要替换内容组件的位置上加上<router-view></router-view>	# 当前位置：App.vue
	5.当路由匹配成功后，<router-view>就会被其他组件内容替换

路由跳转：
	1.使用a链接	#　Vue中不推荐
	2.使用<router-link>标签做路由跳转，to参数绑定路由名　#　例子：<router-link :to="path">去登录</router-link>
	3.js实现跳转：this.$router.push('goods')		#　goods为路由名

路由跳转携带参数：
	情况1：
		路由携带参数形式：/login/?name=lqz&age=19
		直接输入实现：<router-link to="/login/?name=lqz&age=19">去登录</router-link>
		配置实现：
			#　模板区代码
			<router-link :to="path">去登录</router-link>
			#　js代码
			path: {
				name: 'login',
				query: {name: 'lqz', age: 19}
				}
		取参：this.$route.query.key

	情况2：
		路由携带参数形式：/login/lyf
		直接输入实现：<router-link to="/login/lyf">去登录</router-link>
		配置实现：
			#　路由需要修改配置
			const routes = [
                {
                    path: '/login/id,
                    name: 'home',
                    component: Home
                },
			#　模板区代码
			<router-link :to="path">去登录</router-link>
			#　js代码
			path: {
				name: 'login',
				params: {id: 'lyf'}
				}
		取参：this.$route.params.key

路由嵌套：
	使用步骤：
		1.在路由中配置children参数，增加子路由
		2.子路由响应父路由对应组件中的<router-view>标签
		3.其余操作和正常路由一样
	代码案例：
		const routes = [
             {
                 path: '/goods',
                 name: 'goods',
                 component: Goods,
                 children: [
                     {
                         path: 'list',
                         component: GoodList
                     },
                     {
                         path: 'detail',
                         component: GoodDetail
                     }
                 ]
             },

路由守卫：
	功能：对路由进行权限控制

    全局路由守卫：		# 当前位置：router/index.js
        1.前置路由守卫：
            使用位置：在路由跳转前
            使用步骤：	
                1.创建新方法：router.beforeEach(to, from, next)
                    路由参数解析：
                        to：跳转的目标路由
                        from：跳转的起始路由
                        next：是一个方法，用于路由放行
                2.在方法中编写路由守卫的逻辑
            代码案例：
                router.beforeEach((to, from, next) => {
                    if (to.name == 'shoppingcart') {
                        let name = localStorage.getItem('name')
                        if (name) {
                            next()
                        } else {
                            alert('不好意思没有权限')
                        }
                    } else {
                        next()
                    }
                })

        2.后置路由守卫：
            使用位置：在路由跳转后
            使用步骤：	
                1.创建新方法：router.afterEach(to, from)
                    路由参数解析：
                        to：跳转的目标路由
                        from：跳转的起始路由
                2.在方法中编写路由守卫的逻辑
            代码案例：
                router.afterEach((to,from)=>{
                    console.log('后置路由守卫',to,from)
                    document.title = to.name
                })

	其余路由守卫：自己了解
	

战略补充（官方文档+Router版本）

官方文档：https://router.vuejs.org/zh/index.html

Router版本：
	Vue2：使用Router3版本
	Vue3：使用Router4版本