【DAY44】动态样式与局部路由守卫的实现

动态样式：

 将列表项的类设置为“others”和“active”中的一个，具体取决于currenttab变量是否等于“home”。

Myheader.vue:

 <li :class="['others', currenttab ==='home'?'active':'']" @click="handleclick('home')">
                <i class="el-icon-s-home"></i>
                首页
            </li>

click调用handleclick方法：

 handleclick(value){
            this.onchange(value)
        }

在该方法内部，有一个调用 onchange 方法的语句，并将 value 参数作为参数传递给它。onchange 方法可能在同一 Vue.js 组件中或其父组件中定义

app.vue:

<div v-if="CurrentRouter!='/Login'&&CurrentRouter!='/Register'">
      <!-- 显示名为 “MyHeader” 的组件，并传递两个 prop 值（即当前选项卡和选项卡改变事件）给该组件。 -->
      <MyHeader :currenttab="currenttab" :onchange="onchange" />
    </div>

当前路由不是 “/Login” 或 “/Register” 时显示一个名为 “MyHeader” 的组件，并传递两个 prop 值（即当前选项卡和选项卡改变事件）给该组件。

methods:{
    onchange(value){
      this.currenttab=value
    }
  }

局部路由守卫

假设要让header组件在进入非登录与注册界面时显示，而进入登录与注册界面时不显示，需要用到局部路由守卫的思想

App.vue

<div v-if="CurrentRouter!='/Login'&&CurrentRouter!='/Register'">

通过对CurrentRouter的值的查询来判断是否显示Myheader标签。而CurrentRouter值的计算需要

在路由内进行判断，将当前路由的去向存入CurrentRouter

在这里我们使用Vuex中的store库，实现状态的响应式更新

vue.use(Vuex)
//全局的Vuex创建
const store=new Vuex.Store({
    state:{
        //具体路径是字符串
        //表示当前路由的信息
        currentroute:''
    },
    mutations:{
        //更改state中数据的方法
        //state表示状态对象，value是提交过来的对象
        updateRoute(state,value){
        //将value.path的值赋给state.currentroute，实现store中值的更新
           state.currentroute=value.path
        }
    },
}

在 Vuex 的 Store 中，数据的更新必须通过 mutation 来进行。Mutation 是 Vuex 中专门用于修改 Store 中数据的方法，主要作用是封装对 Store 中 state 的修改，强制通过 mutation 修改 state，而不能直接对其进行赋值。

具体来说，Mutation 的作用是为了保证 Store 中的 state 状态的响应式更新机制。即，当 state 发生变化时，会通知到 Vuex 中所有使用该 state 的组件自动更新状态。如果直接修改 state 而不通过 mutation，那么这种响应式的更新机制就无法保证，组件也就不再自动更新状态。

index.js

router.beforeEach((to, from, next) => {

这段代码是 Vue Router 中的一个全局前置路由守卫。在 Vue Router 中，使用 router.beforeEach 注册全局的前置路由守卫函数，这个函数会在每一个路由跳转之前被调用。

• to 表示即将要进入的目标路由对象。
• from 表示当前所在的路由对象。
• next 是一个函数，调用 next() 表示可以顺利进入到目标路由，调用 next(false) 表示不进入目标路由，调用 next('/') 或者其他路径表示跳转到指定的路由。

store.commit("updateRoute",to)

这段代码的作用是提交一个 mutation，用于更新 Store 中的某个状态数据

app.vue

computed: {
    CurrentRouter() {
      // console.log(store)
      return store.state.currentroute
    }
  },
  //路由守卫
  mounted() {
    //在页面渲染时获取当前路径
    this.CurrentRouter = this.$router.currentRoute.path
    // console.log(this.$router.currentRoute.path)
  }

这个组件引用了一个 Vuex Store 实例，通过计算属性函数 CurrentRouter 来获取 Store 中的 currentroute 状态，用于保存当前路由的路径。

接着，在组件的 mounted 生命周期函数中，通过 $router.currentRoute.path 属性来获取当前路径信息，并将其更新到组件的 CurrentRouter 数据属性中。由于组件中的数据更新会自动触发视图的更新，因此这个数据的变化将会同步到组件的视图中，从而达到更新组件状态的目的。

 Vuex 中的状态数据是响应式的，只有在通过 Vue 组件模板或者计算属性访问该状态数据时，Vue 才会自动追踪该状态数据的变化，并更新组件的视图。如果没有计算属性或者模板中的引用，即使我们修改了 currentroute 的值，组件的视图也不会自动更新。