1、路由配置
2、路由传参
3、接收参数和数据
4、组件内部实现路由跳转
5、路由导航

1. 路由参数配置
{path: 'xx/:参数变量', component: xx}

let routes = [{path: '/product',component: product,children: [{path: 'detail/:aid',component: detail}]}
]

2. 页面传参：
（1）router-link to="xx/参数?a=1&b=2"

<h3>商品页</h3>
<router-link to="/product/detail/001">商品001</router-link>
<router-link to="/product/detail/002">商品002</router-link>
<router-link :to="'/product/detail/002'">商品002</router-link>

（2）router-link :to="{name:'xx', params:{}, query:{}}"
params：数据，query：参数

<router-link :to="{name: 'detail', params:{aid: '003'}, query:{a:11,b22}}"

注意：用这种方式传参时，路由配置中需要添加一个 name，指向相同 name 值的路径。

let routes = [{path: '/product',component: product,children: [{path: 'detail/:aid',name:'detail',component: detail}]}
]

1. this.$router.push()

这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

// 字符串
router.push('/home')// 对象
router.push({ path: '/home' })// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，那么 params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

2. this.$router.replace()
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

3. router.go(n)
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)// 后退一步记录，等同于 history.back()
router.go(-1)// 前进 3 步记录
router.go(3)// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

全局守卫、路由独享的守卫、组件内守卫

注意： 参数或查询的改变并不会触发进入/离开的导航守卫。 你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。

1. 全局守卫： router.beforeEach

任何时候都会被守卫；应用场景：用户在未登录的时候进入任意页面，我们就让用户跳转到登录页面，在已登录的时候让用户正常跳转到点击的页面。demo

//常在 main.js 或 route.js 中写
router.beforeEach((to,from,next) => {next()
})

2. 路由独享守卫

在路由配置上直接定义 beforeEnter 守卫：

const router = new VueRouter({routes: [{path: '/foo',component: Foo,beforeEnter: (to, from, next) => {// ...}}]
})//或者
let detail = (to,from,next) =>{// ...
}
const router = new VueRouter({routes: [{path: '/foo',component: Foo,beforeEnter: detail}]
})

3. 组件内守卫

beforeRouteEnter (to, from, next) {//在渲染该组件的对应路由被 confirm 前调用// 不！能！获取组件实例 `this`// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {// 在当前路由改变，但是该组件被复用时调用// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`
}

示例：

<script>export default {beforeRouteEnter (to,from,next){console.log("组件内部前置守卫");// 同步条件： cookie,localstorage,vuexif(true){next(true);} else {next('/login');}// 异步条件axios({url:'xxx'}).then( res =>{//通过路由的 query 传参to.query.userData = data;})}}
</script>

因为拿不到实例，所以不能直接赋值传参，可以通过 1. 路由传参; 2.next。

集中式数据管理，一处修改，多处使用。适用于中大型项目；

图片解读：你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地 提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

一句话来说：当要修改state中的值，不建议用直接赋值的方法， 这样不方便调试。

1. 通讯方式推荐使用： mapActions()（组件和 actions） 和 dispatch()（组件 和 actions）；
this.$stroe.dispatch(类型, 数据/也叫“负载”)：组件 - actions
commit：actions - mutations
mapActions
mapGetters
mapMutations
mapState

2. 简单示例1 [组件 - actions - mutations - state]：
在 store 中对 count 进行加一。
（1）准备工作，目录结构

（2）代码：
main.js ↓

import store from './store'
new Vue({router,store, //注册render: h => h(App)
}).$mount('#app')

store 文件夹下 index.js ↓
类似 router 中的 index.js，可以合并在一个 index.js 一起写，也可以分成几个文件或文件夹引入到 index.js

import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import mutations from './mutations'
import state from './state'
import getters from './getters'Vue.use(Vuex)export default new Vuex.Store({state,mutations,actions,getters// modules
})

let state = {count:0;
}
export default state;

< button @click="jia">按钮+< /button> count：{{this.$store.state.count}}
methods: {jia(){this.$store.dispatch('jia'); }
}

let actions = {//与mutations的通讯方法，所以mutations.js中要有increment方法// 写法： jia:function(){}// 或者jia(){}jia:(obj,payload)=>{let {commit,state} = obj;		commit("increment","数据");}//或者//jia: ({commit,state}, payload)=>{//	commit("increment", payload)//}
}
export default actions;

let mutations = {increment: (state,payload){state.count++;//在actions中通过commit到mutations中，逻辑在mutations中处理}
}
export default mutations;

（3）案例小结 ：

• 在组件中，用 $store.dispatch(方法A, 数据A) 将方法和数据传递到 actions 中。
• （在 actions.js 中） 此时 actions 接收到的函数（函数名是“方法A”）携带了两个参数，一个是用来传递到 mutations 的方法，一个是由组件传递过来的 数据A。经过逻辑处理，然后使用第一个参数中的 commit(方法名B, 数据B) 将 方法B 和数据传递到 mutations 中。
• （在 mutations.js 中） 在 mutations 中可以接收到来自 actions 传递过来的函数（函数名为“方法B”），这个函数携带了两个参数，第一个参数是 store仓库，第二个是组件传递过来的数据A或 actions 传递过来的 数据B。这里可以对在store中定义的变量值进行处理。
• 回到组件，在组件中可以通过 this.$store.state 获取到在state中定义的变量的值。

除了上面在组件中使用 dispatch 方法，还可以在组件中直接通过 commit 方法到 mutations中，省略了actions.js这一部分的操作，但是不建议使用这个方法。

app.vue

jia(){this.$store.commit('increment','数据'); //commit方法是组件发到mutations的通讯方法
}

（4）还有 mapActions() 方法
这里如果要携带数据，直接在方法中传参 @click = "jia('数据12')"；

app.vue

import {mapActions,mapGetters} from 'vuex'//methods:mapActions([类型1,类型2,类型3]) 
//mapActions调用后，返回对象，类型做key,函数做值
methods:mapActions(["jia"]) //相当于第一种方法，同时定义了同名的方法名和dispatch中的类型

当页面中既要写自己的代码，又使用到 vuex 时，使用 ... 拓展运算符和 [] 解构解析。

//下述中的 ... 是拓展运算符, 使用 [] 是解构赋值
methods: {...mapActions(["jia"]),// 将 jia()方法 映射为 `this.$store.dispatch('jia')...mapActions({add: 'increment' // 将 add()方法 映射为 `this.$store.dispatch('increment')`}),handleClick(){console.log("自己在组件中写的方法");}
}

3. 简单示例2 [组件 - getters - state]：
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

let state= {num: 10
};
export default state;

< button @click="getNum">+< /button>{{num}}
//script部分
import { mapGetters } from 'vuex';
computed: mapGetters(['num']),

let getters= {num: (state){return state.num;}
};
export default getters;

computed: {num(){return this.$store.state.num;}
}

getters.js ↓

//这个getters.js 就是将原来通过 组件-action-mutation- state 后得到数据（这里最终的数据就是mutations中的样子），然后再进行修改。
//mapGetters['count']
let getters = {count: (state) => {//当 state.count < 10 时，依次+1，>=10 时，显示 “超过10”if(state.count<10){return state.count;} else {return "超过10";}}
}
export default getters;

4. 示例3-异步处理
简单来讲，vuex 中的异步处理，就是将异步请求放到 actions 中，过程与 示例1 相似。

< button @click="getData({pageNo:1, pageSize:10})">异步处理< /button>
//script部分
import { mapActions } from 'vuex';
methods: mapActions(['initDate'])

import axios from 'axios';
let actions = {initDate: ({commit, state}, paylod) => {axios({url:'接口地址'}).then( res => { commit('initData', res.data.count); })}
};
export default actions;

let mutations = {initData: (state, paylod){state.count += paylod;}
};
export default mutations;

5. 个人理解 ： Vuex 是一个状态管理模式，在 vuex 中的 state 中定义变量和值。类似于我们熟悉的 localStorage 和 sessionStorage。这里就拿sessionStorage和vuex来作一下对比：