vue-day-06

一、VueX的使用

 这是VueX的作用 

 

 

　　1、vuex的执行流程图

  

 

 

 

 

二、Vue-router的使用

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

  https://router.vuejs.org/zh/index.html

  1、基本使用

使用步骤：

    ① 新建 router /index.js

    ② main.js 中使用：之前已经写好了

import router from './router'
        new Vue({
            ...
              router,
            ...
            }).$mount('#app')

    ③ 只需要写页面组件，配置路由即可

      ④ 在 App.vue 中加入

        <router-view></router-view>

      ⑤  在浏览器访问const routes中配置的路径，就能看到对应的页面组件了

  2、路由的跳转

   使用步骤：

    ① 在html中使用

      <router-link：to='path'>去登录</router-link>

    ② 在js中使用

      this.$router.push('goods')

  3、路由跳转携带参数

    ① 两种情况

      - 带在请求地址中 ？name=wyn&age=19

      - 在地址中类似于django的分组  /goods/1/

 

    ② 情况1：请求地址中

      <router-link to="/login/?name=wyn">

    ③ 情况2：地址中

      <router-link to="/login/wyn">去登录</router-link>

      组件中接收：this.$route.params 取

  4、路由嵌套

 　　　使用步骤：

    1、router/index.js  相应的路由中

  {
            path: '/goods',
            name: 'goods',
            component: Goods,
            children: [
                {
                    path: 'list',
                    component: GoodList
                },
                {
                    path: 'detail',
                    component: GoodDetail
                }
            ]

        },

    2、必须要在Goods组件中，写<router-view></router-view>

    3、使用router-link标签跳转

    4、只会变更Goods下router-view包裹的位置

  5、路由守卫 

    ① 对路由进行权限控制

    ② 前置路由守卫

router.beforeEach((to, from, next) => {
    console.log('前置路由守卫', to, from)

    if (to.name == 'shoppingcart') {
        let name = localStorage.getItem('name')
        if (name) {
            next()
        } else {
            alert('不好意思没有权限')
        }
    } else {
        next()
    }

})

    ③ 后置路由守卫

router.afterEach((to,from)=>{
	console.log('后置路由守卫',to,from)
	document.title = to.name
})