Vue-(6)

内容概览

• Vuex的使用
• Vue-router的使用

Vuex的使用

# Vuex是vue的插件,增强了vue的功能
在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信
1
2

• vuex的执行流程图
  

• Vuex的使用流程

actions:修改数据先调用dispatch到actions中执行方法,actions可以与后端交互,判断是否可以执行
mutations:执行修改state数据的地方
state:存数据的地址

使用步骤:
	1. 在state中定义变量
	2. 在组件中通过this.$store.dispatch('actions中定义的函数'),触发actions中的函数执行
	3. 在actions内的函数中,调用context.commit('mutations中定义的函数')
	4. 在mutations定义的函数中修改state中的数据
	5. 页面中只要使用$store.state.变量,变量变化,页面就变化,实现了组件间通信
	6. 
		-在组件中可以直接调用commit触发(mutations中定义的函数)
        -在组件中可以直接修改state中定义变量(不建议)
1
2
3
4
5
6
7
8
9
10
11
12
13

App.vue:

<template>
  <div id="app">
    <button @click="add">ddd</button>
    {{ $store.state.num }}
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    add() {
      console.log(this.$store)
      this.$store.dispatch('add')
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

store/index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        num: 10
    },
    mutations: {
        add(state) {
            state.num += 5
        }
    },
    actions: {
        add(context) {
            //第一个参数传入contex，内部有 commit和dispatch,有多个参数会依次传入
            //调用dispatch会触发actions中函数执行
            // 可以在这里发送axios请求去后端（token:放在cookie中），查询是否有权限，如果有再改值
            context.commit('add')  // 执行mutations中的add函数
        }
    },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Vue-router的使用

官方提供的用来实现SPA的vue插件；使用了它以后，我们可以写很多页面组件，通过地址栏不同的路径显示不同的页面组件
Vue.js的官方路由

基本使用

// 使用步骤
	1. 新建router/index.js
		const router = [
			{
				path:'/',  // 路由
				name:'home',
				component:Home  // 组件
			}
		]
	2. main.js中使用
		import router from './router'
		new Vue({
		  router,
		  render: h => h(App)
		}).$mount('#app')
	3. 只需要写页面组件,配置路由即可
	4. 在App.vue中加入
		<router-view></router-view>
	5. 在浏览器访问const routes 中配置的路径,就能看到对应的页面组件了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<template>
  <div id="app">
    <router-view>router-view>
  div>
template>

<script>
export default {
  name: 'App',
}
script>
1
2
3
4
5
6
7
8
9
10
11
12

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from "@/views/Home";

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router


// views/Home.vue
<template>
<div>
  <h1>Home组件</h1>
</div>
</template>

<script>
export default {
  name: "Home"
}
</script>
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

路由的跳转

<template>
  <div>
    <h1>Home组件h1>
    
    <router-link :to="{name:'login'}">跳转1router-link>  
    <router-link to="/login">跳转2router-link>  
    
    
    <button @click="LoginURL">跳转3button>
  div>
template>

<script>
export default {
  name: "Home",
  methods: {
    LoginURL() {
      this.$router.push('login')
    }
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

路由跳转携带参数

1. 带在请求地址中，以?name=xxx&age=20

<template>
  <div>
    <h1>Home组件h1>
    
    <router-link to="/login?name=oscar&age=20">跳转1router-link>
    
    <router-link :to="path">跳转2router-link>
  div>
template>

<script>
export default {
  name: "Home",
  data() {
    return {
      path: {
        name: 'login',
        query: {name: 'oscar', age: 20}
      }
    }
  },
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<template>
  <h1>Login页面h1>
template>

<script>
export default {
  name: "Login",
  mounted() {
    console.log(this.$route.query)
  }
}
script>

1
2
3
4
5
6
7
8
9
10
11
12
13

2. 在地址中类似于django的分组 /books/5
   在router/index.js中修改路由

const routes = [
    {
        path: '/login/:id',  // 固定写法
        name: 'login',
        component: Login
    },
1
2
3
4
5
6

<template>
  <div>
    <h1>Home组件h1>
    
    <router-link to="/login/aaa">跳转1router-link>
    
    <router-link :to="path">跳转2router-link>
  div>
template>

<script>
export default {
  name: "Home",
  data() {
    return {
      path: {
        name: 'login',
        params: {name: 'bbb', id: 20}  // 在路由中显示key与路由相同的value值,两个参数都会传入params中
      }
    }
  },
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<template>
  <h1>Login页面h1>
template>

<script>
export default {
  name: "Login",
  mounted() {
    console.log(this.$route.params)
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12

路由嵌套

1. 在router.js对应的路由中添加  children:[]
2. 必须在父路由的组件中,写router-view
3. 使用router-link标签跳转,只会变更父路由组件中router-view包裹的内容
1
2
3

router/index.js

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home,
        children:[
            {
                path:'user',
                component:User
            },
            {
                path:'detail',
                component:UserDetail
            },
        ]
    },
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

view/Home.vue

<template>
  <div>
    <router-link to="user">userrouter-link>
    <br>
    <router-link to="detail">detailrouter-link>
    <hr>
    <router-view>router-view>
  div>

template>

<script>
export default {
  name: "Home",
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

views/User|UserDetail

<template>
<div>
  <h1>User组件h1>
div>
template>

<script>
export default {
  name: "User"
}
script>
1
2
3
4
5
6
7
8
9
10
11

路由守卫

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from "@/views/Home";
import Login from "@/views/Login";
import User from "@/views/User";
import UserDetail from "@/views/UserDetail";

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home,
        children: [
            {
                path: 'user',
                component: User
            },
            {
                path: 'detail',
                component: UserDetail
            },
        ]
    },
    {
        path: '/login',
        name: 'ddd',
        component: Login
    },
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})


//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
    console.log('前置路由守卫', to, from)  // from：从哪个路由来  to：到哪个路由去
    if (to.path === '/detail') { //判断是否需要鉴定权限
        if (localStorage.getItem('name') === 'xxx') {
            next()  // 如果localStorage中有key为name值为xxx的就可以访问
        } else {
            alert('无权限查看！')  // 否则不能访问
        }
    } else {
        next()  // 不是指定的路由直接都可以访问
    }
})

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to, from) => {
    console.log('后置路由守卫', to, from)
    document.title = to.path.slice(1)  // 修改标签页名字
})


export default router

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
55
56
57
58
59
60
61
62