• 一、Vuex的使用
  • • Vuex的介绍：vue的插件，增强了vue的功能
    • Vuex的使用流程
    • vuex的执行流程
• 二、Vue-router的使用
  • • 介绍
    • 基本使用步骤
    • 路由的跳转
    • 路由跳转携带参数
    • 路由嵌套步骤
    • 路由守卫

一、Vuex的使用

1. Vuex的介绍：vue的插件，增强了vue的功能

   在Vue中实现集中式状态(数据)管理的一个Vue插件，在Vue应用中多个组件的共享状态进行集中式的管理(读/写),

   也是一种组件间通信的方式，且适用于任意组件间的通信

2. Vuex的使用流程

   • state：存储数据的地址
   • actions：服务员，中转站
   • mutations：厨师，真正改变state数据的地方
   • 使用步骤：
     1. 在state中定义变量
     2. 在组件中通过this.$store.dispatch('actions中定义的函数')，触发actions中的函数执行
     3. 在actions中的函数中，调用context.commit('mutations中定义的函数')
     4. 在mutations中定义的函数实现真正的修改state中的数据
     5. 页面中只要使用$store.state.变量，变量变化，页面就变化，实现了组件间通信
     6. 注意:
        • 在组件中可以直接调用commit触发mutations中定义的函数
        • 在组件中可以直接修改state中定义变量

3. vuex的执行流程

二、Vue-router的使用

1. 介绍

   ​ 官方提供的用来实现SPA的vue插件

   ​ 有了它以后，我们可以写很多页面组件，通过地址栏的不同路径先是不停地页面组件

   ​ https://router.vuejs.org/zh/index.html

2. 基本使用步骤

   1. 新建router/index.js

      const routes = [配置路由1，配置路由2]

   2. main.js中使用：之前已经写好的

      import router from './router'
      new Vue({
          ...
          router,
          ...
      }).$mount('#app')
      

   3. 只需要写页面组件，配置路由即可

   4. 在App.vue中加入

      <router-view>
      
      </router-view>
      

   5. 在浏览器访问const routes 中配置的路径，就能看到对应的页面组件

3. 路由的跳转

   • 使用步骤：

     -在html中使用:
     	<router-link :to="path">去登录</router-link>
     -在js中使用：
     	this.$router.push('goods')
     

4. 路由跳转携带参数

   • 两种情况：

     • 带在请求地址中以：？name=zhang&age=19
     • 在地址中类似于django的分组：/goods/1/

   • 情况一：请求地址中

     <router-link to="/login/?name=zhang&age=19">去登录<router-link>
     组件中接受：this.$route.query.取
     

   • 情况二：地址中

     <router-link to="/login/zhang">去登录<router-link>
     组件中接受：this.$route.params.取
     

5. 路由嵌套步骤

   1. router/index.js相应的路由中

      {
          path:'/goods',
          name:'/goods',
          component:Goods,
          children:[
              {
                  path:'list',
                  name:'list',
                  component:GoodList
              },
              {
                  path:"detail",
                  name:'detail',
                  component:GoodDetail
              }
          ]
      }
      

   2. 必须要在Goods组件中，写

      <router-view></router-view>
      

   3. 使用router-link标签跳转

   4. 只会变更Goods下router-view包裹的位置

6. 路由守卫

   1.作用
   	对路由进行权限控制
   2.前置路由守卫
   	router.beforeEach((to,from,next)=>{
   		console.log('前置路由守卫',to,from)
   		if (to.name == 'shoppingcar'){
   			let name = localStorage.getItem('name')
   			if (name) {
   				next()
   			}else{
   				alert('不好意思没有权限')
   			}
   		}else{
   			next()
   		}
   	})
   3.后置路由守卫
   	router.afterEach((to,from)=>{
   		console.log('后置路由守卫',to,from)
           document.title = to.name
   	})