vue2技能树（12）-路由守卫、动态路由、状态管理

---

👍 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！

---

路由守卫详解

Vue Router 守卫是用于控制和管理路由导航的钩子函数，它允许你在路由导航发生前、发生时和发生后执行特定的操作。在这里，我们将详细介绍 Vue 2 的路由守卫，并提供一个详细的项目示例来演示它的用法。

全局前置守卫 beforeEach

全局前置守卫 beforeEach 在路由导航发生前执行，允许你进行身份验证、权限检查或其他操作。你可以使用它来拦截导航并决定是否允许用户访问某个路由。

项目示例

const router = new VueRouter({
  routes: [
    { path: '/public', component: Public },
    { path: '/private', component: Private }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.path === '/private' && !isLoggedIn) {
    // 如果用户未登录，重定向到公共页面
    next('/public');
  } else {
    next();
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这个示例中，beforeEach 守卫拦截了前往 /private 路由的导航，检查用户是否已登录。如果用户未登录，守卫将用户重定向到公共页面。

全局解析守卫 beforeResolve

全局解析守卫 beforeResolve 会在导航发生前被执行，但是它是在所有组件内守卫和异步路由组件被解析之后执行的。通常，你可以在 beforeResolve 中执行一些需要等待异步操作的任务。

全局后置守卫 afterEach

全局后置守卫 afterEach 在路由导航成功完成后被执行，它不会影响导航本身。你可以在其中执行一些日志记录、页面统计或其他操作。

项目示例

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ]
})

router.afterEach((to, from) => {
  console.log(`从 ${from.path} 导航到 ${to.path}`);
  // 这里可以执行日志记录或页面统计操作
})
1
2
3
4
5
6
7
8
9
10
11

在这个示例中，afterEach 守卫用于在每次成功导航后记录用户的导航历史。

路由独享守卫

除了全局守卫，你还可以在路由配置中定义独享守卫，这些守卫仅适用于特定的路由。

项目示例

const router = new VueRouter({
  routes: [
    {
      path: '/private',
      component: Private,
      beforeEnter: (to, from, next) => {
        if (!isLoggedIn) {
          next('/public');
        } else {
          next();
        }
      }
    }
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这个示例中，beforeEnter 守卫是路由独享守卫，用于拦截前往 /private 路由的导航，并检查用户是否已登录。

完整的项目示例

以下是一个完整的项目示例，演示了如何在Vue 2应用中使用路由守卫进行身份验证和导航控制：

const router = new VueRouter({
  routes: [
    { path: '/public', component: Public },
    {
      path: '/private',
      component: Private,
      beforeEnter: (to, from, next) => {
        if (!isLoggedIn) {
          next('/public');
        } else {
          next();
        }
      }
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.path === '/private' && !isLoggedIn) {
    next('/public');
  } else {
    next();
  }
})

router.afterEach((to, from) => {
  console.log(`从 ${from.path} 导航到 ${to.path}`);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在这个示例中，我们配置了全局前置守卫、全局后置守卫和路由独享守卫，用于控制导航和记录导航历史。

Vue 2 的路由守卫功能提供了强大的控制能力，允许你根据需要执行各种操作，包括身份验证、权限检查、导航记录等。通过合理使用路由守卫，你可以创建更安全、更智能的单页面应用。

动态路由详解

Vue.js 2 允许你创建动态路由，这意味着你可以使用路由参数来构建具有动态内容的页面。在这里，我们将详细介绍 Vue 2 的动态路由，并提供一个详细的项目示例来演示它的用法。

创建动态路由

在 Vue Router 中，你可以使用占位符来创建动态路由。占位符使用冒号 : 后跟参数名称的形式，参数名称可以是任何你选择的名称。

项目示例

以下是一个动态路由的配置示例：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})
1
2
3
4
5

在这个示例中，路由路径中的 :id 是一个动态参数，它允许你在访问 /user/1、/user/2 等不同路由时使用相同的组件。

使用路由参数

一旦你创建了动态路由，你可以在组件中通过 $route.params 来访问路由参数。

项目示例

1
2
3
4
5
6

在这个示例中，$route.params.id 用于获取路由参数 id 的值。

监听路由参数的变化

有时候，你需要在路由参数发生变化时执行一些操作。你可以使用 beforeRouteUpdate 导航守卫来监听参数变化。

项目示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这个示例中，beforeRouteUpdate 导航守卫在路由参数变化时将 userId 更新为新的参数值。

完整的项目示例

以下是一个完整的项目示例，演示了如何创建动态路由以及在组件中使用路由参数：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

new Vue({
  router,
  el: '#app'
})
1
2
3
4
5
6
7
8
9
10

1
2
3
4
5
6
7

在这个示例中，我们配置了动态路由，使用户可以访问 /user/1、/user/2 等不同的用户配置页面，同时在组件中使用 $route.params.id 访问参数值。

动态路由是 Vue Router 中的重要特性，它允许你构建具有动态内容的页面，如用户配置页面、产品详情页面等。通过使用动态路由，你可以更好地组织和管理你的路由，以适应各种情况。

状态管理详解

在Vue.js 2中，状态管理是管理和共享应用程序数据的关键部分，尤其对于大型和复杂的应用程序。Vue提供了一个名为Vuex的官方状态管理库，用于处理全局状态。在这里，我们将详细介绍Vue 2的状态管理，同时提供一个详细的项目示例来演示它的用法。

安装和配置 Vuex

首先，你需要安装并配置 Vuex，以便在Vue应用中使用状态管理。

安装 Vuex

使用npm或yarn安装 Vuex：

npm install vuex
# 或
yarn add vuex
1
2
3

配置 Vuex

创建一个Vuex store，通常包括以下部分：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    // 存放应用状态的地方
  },
  mutations: {
    // 用于修改状态的方法
  },
  actions: {
    // 用于触发mutations的方法，可以包含异步操作
  },
  getters: {
    // 用于从状态派生出新状态
  }
});

export default store;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

使用 State

在Vue组件中使用全局状态，你需要使用mapState辅助函数或this.$store对象。

项目示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这个示例中，mapState 辅助函数用于将count状态映射到组件的计算属性中，而this.$store.commit 用于提交一个名为increment的mutation。

使用 Mutations

Mutations 用于修改状态，它们必须是同步函数。

项目示例

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});
1
2
3
4
5
6
7
8
9
10

使用 Actions

Actions 用于触发 Mutations，可以包含异步操作。

项目示例

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

使用 Getters

Getters 用于从状态派生出新状态，类似于Vue组件的计算属性。

项目示例

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => state.count * 2
  }
});
1
2
3
4
5
6
7
8

完整的项目示例

以下是一个完整的项目示例，演示了如何使用 Vuex 来管理全局状态：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
});

new Vue({
  el: '#app',
  store,
  template: `
    

      
Count: {{ count }}
      
Double Count: {{ doubleCount }}
      Increment
      Increment Async
    
  `,
  computed: {
    count() {
      return this.$store.state.count;
    },
    doubleCount() {
      return this.$store.getters.doubleCount;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

在这个示例中，我们配置了 Vuex 来管理应用程序的全局状态，并在Vue组件中使用 this.$store 来访问状态、触发 mutations 和 actions。这使你能够更好地组织和管理应用程序的数据。