vue-router 和 vuex

Vue-router

1、安装vue-router

​ npm install vue-router --save-dev

2、简单配置路由

​ 在router的index.js中设置

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
	routes:[{
		path:'/',
		name:'Hello',
		// 在同一个路由用到两个组件需要变成components
		component:Hello
	}]
})

​

3、引入子路由

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import hi from '@/components/hi'

Vue.use(Router)

export default new Router({
	routes:[{
		path:'/',
		name:'Hello',
		// 在同一个路由用到两个组件需要变成components
		component:Hello,
		children:[
		{
			path:'hi1',
			name:'hi1',
			component:hi
		}
		]
	}]
})

4、同一个页面两个路由（name的作用）

组件引用：

<router-view ></router-view>
 <router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"></router-view>
 <router-view name="right" style="float:right;width:50%;background-color:#c0c;height:300px;"></router-view>

router：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import hi1 from '@/components/hi1'
import hi2 from '@/components/hi2'

Vue.use(Router)

export default new Router({
	routes:[{
		path:'/',
		name:'Hello',
		// 在同一个路由用到两个组件需要变成components
		components:{
			default:Hello,
			left:hi1,
			right:hi2
		}
		
	}]
})

5、传值

通过标签to属性传参

​ App.vue

<router-link :to="{name:xxx,params:{key:value}}"> valueString </router-link>

​ 接收：

{{$router.params.key}}

通过url传参

router中定义：

{
    path:'/params/:newsId/:newsTitle',
     component:Params
}

组件中获取：

<p>新闻ID：{{ $route.params.newsId}}</p>
<p>新闻标题：{{ $route.params.newsTitle}}</p>

App.vue中传值

<router-link to="/params/198/jspang website is very good">params</router-link> |

正则表达式验证传值：直接用括号括起来

path:'/params/:newsId(\\d+)/:newsTitle',

6、重定向

不需要设置component，直接设置重定向的路径

export default new Router({
	routes:[{
		path:'/goback',
		name:'Hello',
		redirect:'/'
	}]
})

7、404

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import hi from '@/components/hi'

Vue.use(Router)

export default new Router({
	routes:[{
		path:'*',
		name:'404',
		// 在同一个路由用到两个组件需要变成components
		component:404,
	}]
})

8、钩子

函数：

• beforeRouteEnter：在路由进入前的钩子函数。
• beforeRouteLeave：在路由离开前的钩子函数。

参数：

1. to:路由将要跳转的路径信息，信息是包含在对像里边的。
2. from:路径跳转前的路径信息，也是一个对象的形式。
3. next:路由的控制参数，常用的有next(true)和next(false)。

export default {
	beforeRouteEnter:(to,from,next)=>{
		console.log("准备进入路由模板")
		next();
	},
	beforeRouterLeave(to,from,next)=>{
		console,log("准备离开路由模板")
		next();
	}
}

Vuex

vuex就是一个在全局的存储变量的文件配置，可以用$store来获取变量

1、Vuex的安装：npm install vuex --save

​ 如果使用的是vue2，则需要安装vuex3

​ 如果使用的是vue3，则需要安装vuex4

2、设置变量，挂载到网页文件中

​ state方法设置变量:
​ const state={count:1}
​ 挂载到网页中的方法有四个：
​ ①可以直接{{$store.state.count}}
​ 以下可以直接使用{{count}}
​ ②

computed:{
	count(){
		return this.$store.count
​	}
}

​ ③引用mapState

import {mapState} from 'vuex'
​	computed:mapState({
​		count:state=>state.count
​	})

​ ④数组的方式引用mapState

computed:mapState(['count'])

3、设置方法，使得变量可以产生变化，修改状态

一、同步的方法mutation

​ 在store设置方法：

 const mutations={
                add(state){
                    state.count++
                },
                reduce(state){
                    state.count--
                }
            }

​ 在网页中引用：
​ ①直接用commit引用

@click="$store.commit('add')"

​ ②使用mapMutations方法引用

  import { mapMutations } from 'vuex'
                methods:mapMutations([
                    'add','reduce'
                ])

​ 此时引用可以直接

@click="add"

二、异步的方法action

​ 在store设置方法：

const actions={
      			addAction(context){
      				context.commit('add',10)
      			},
      			reduceAction({commit}){
      				commit('reduce')
      			}
      		}

​ 在组件中引用：
​ ①用mapActions的方法

import { mapActions } from 'vuex'

// 运用拓展运算符
  			methods:{
  				...mapMutations(['add','reduce']),
  				...mapActions(['addAction','reduceAction'])
  			}

​ 调用@click="addAction"

4、传值

​ 在store中设置方法

const mutation = {
	add(state,n){
		state.count += n
	}	
}

网页中传值

​ 第一种：

@click="$store.commit('add',10)" //第一个state不需要传

​ 第二种：用mapMutation方法声明之后可以直接调用

@click="add(10)"