路由+Vuex

## Vuex开发者工具的使用

    2.组件中读取Vuex中的数据

        $store.state.sum

    3.组件中修改Vuex中的数据

        this.$store.dispatch('action里面的方法名',数据)

      或者  this.$store.commit('mutations里面的方法名',数据)

    备注:如果没有网络请求其他业务逻辑,组件也可以越过actions,即不写dispatch,直接写commit

## getters的使用

  1.概念：当state中的数据需要经过加工再使用时，可以使用getters加工

  2.再store.js中追加getter配置  要写返回值return   

 .....

    const getters = {

      bigSum(state){

        return state.sum * 10

      }

    }

    //创建并暴漏Store

      export default new Vue.Store({

        ....

        getters

      })
  

    3.组件中读取数据

     <span>sum的十倍是{{$store.getters.bigSum}}<span>

## 四个map方法的使用   

1.mapState方法：用于帮助我们映射state中的数据为计算属性
      computer:{
        //借助mapState生成计算属性:sum,school,subject（对象写法）
          ...mapState({sum:'sum',school:'school'})
        //借助mapState生成计算属性:sum,school,subject（数组写法）
        ...mapState([sum:'sum',school:'school'])
      }
    2.mapGetters方法：用于榜之我们映射getters中的数据为计算属性
      computer:{
        //借助mapGetters生成计算属性:bigSum（对象写法）
          ...mapGetters({bigSum:'bigSum'})
        //借助mapGetters生成计算属性:sum,school,subject（数组写法）
        ...mapGetters([bigSum:'bigSum'])
      }
    3.mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch('xxx',数据)的函数
      methods:{
        //靠mapActions生成，incrementOdd,incrementWait(对象形式)
        ...maoActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
        //数组形式
        ...mapActions(['jiaOdd'])
      }
    4.mapMutations方法：用于榜之我们生成与mutations对话的方法，即包含$store.commit(xxx)的函数
      //靠mapActions生成，JIA,JIAN(对象形式)
      ...mapMutations({incrementOdd:'jiaOdd'incrementWait:'jiaWait'})
      //数组形式
      ...mapMutations(['JIA','JIAN')

    备注：mapActions与mapMutations使用时，如果需要传递参数需要，在模板中绑定事件时传递好参数，否则参数时事件对象

## 模块化+命名空间

  1.目的：让代码更好维护，让多种类数据分类更加明确

  2.修改Store.js   

 conse countAbout = {
      namespaced:true //开启命名空间
      state:{x:1},
      actions:{....},
      mutations:{.....},
      getters:{
        bigSum(state){
          return state.sum * 10
        }
      }
    }
    conse PersonAbout = {
      namespaced:true //开启命名空间
      state:{
        personList:{
          [id:nanoid(),name:'张三']
        }
      },
      actions:{....},
      mutations:{.....},
    }
    export default new Vue.Store({
      countAbout,
      personAbout
    })

  3.开启命名空间之后，组件中读取state数据:

    方式一：自己读取

 this.$store.state.personList.list

    方法二:借助mapState读取

...mapState('countAbout',['sum','school','subject'])

  4.开启命名空间之后，组件中读取getter数据

    方法一，自己读取

 this.$store.getters['personList/firstPersonName']

    方法二，借助mapGetter读取

 ...mapGetter('CountAbout',['bigSum'])

  5.开启命名空间后，组件中调用dispatch

    方法一，自己直接dispatch

 this.$store.dispatch('personAbout/addPersonWang',person)

    方法二，借助mapAction

      ...mapAction('personAbout',[incrementOdd:'jiaOdd',incrementWait:'jiaWait'])

  6.开启命名空间后，组件中调用commit

    方法一，自己调用commit

      this.$store.commit('personAbout/ADD_PERSON',person)

    方法二，借助mapMutations

      ...mapMutations('countAbout',[increment:'JIA',decrement:'JIAN'])

## 路由

  1.理解：一个路由（route）就是一组映射关系(key-value)，多个路由需要路由器(router)进行管理

  2.前端路由：key是路径，value是组件

1.基本使用

  1.安装vue-router，命令 nom i vue-router

  2.应用插件:Vue.use(VueRouter)

  3.编写router配置项

   // 该文件专门用于创建整个应用的路由器
    import  VueRouter  from "vue-router";
    // 引入组件
    import About from '../components/About'
    import Home from '../components/Home'

    // 创建并且暴漏一个路由器   

export default new VueRouter({
        routes:[
            {
                path:'/about',
                component:About
            },
            {
                path:'/home',
                component:Home
            },
        ]
    })

    4.实现切换(active-class可以配置高亮样式)

 <router-linl active-class='active' to='/home'>Home</router-link>

    5.指定展示位置

 <router-view></router-view>

2.几个注意点

  1.路由组件通常存放在pages文件夹，一般组件通常放在components文件夹

  2.通过切换，'隐藏'了的路由器组件，默认是被销毁的，需要的时候再去挂载

  3.每个组件都有自己的$router属性，里面存储着自己的路由信息

  4.整个应用至阴一个router，可以通过组件的$router属性获取到

## 多级路由

  1.配置路由规则，使用children配置项:   

 routers:[
      {
        path:'/about',
        components:About,
      }
      {
        path:'/Home',
        components:Home,
        children:[ //通过children配置子级路由
          {
            path:'news' //此处一定不要写 /
            components:News
          }
          {
            path:'message', 此处一定不要写 /
            components:Message
          }
        ]
      }
    ]

  2.跳转(要写完整路径)

    <router-link to='/home/message'></router-link>

## 路由传参

  1.传递参数

    //跳转并携带query参数，to的字符串写法

    <router-link :to='/home/message/detail?id=${m.id}&title=${m.title}'>{{m.title}}</router-link>
    //跳转并携带query参数，to的对象写法
    <router-link :to={
      path:'/home/message/detail',
      query:{
        id:m.id,
        title:m.tiele
      }
    }></router-link>

  2.接收参数:

    $route.query.id

    $route.query.title

## 命名路由
  1.作用：可以简化路由的跳转
  2.如何使用
    1.给路由命名：
     routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News,
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'xiangqing', //给路由命名
                            path:'detail',
                            component:Detail
                        }
                    ]
                }
            ]
        },
    ]

    2.简化跳转:
      //简化前，需要写完整的路径
      <router-link to='/home/message/detail'>跳转</router-link>
      //简化后，直接通过名字跳转
      <router-link :to='{name:'xiangqing'}'>跳转</router-link>
      //简化写法配合参数传递
      <route-link :to='{
        name:'xiangqing',
        query:{
          id:m.id,
          title:m.title
        }
      }'>
      跳转
      </route-link>
## 路由的props配置

  作用：让路由组件更方便的收到参数
    {
      name:'xiangqing',
      component:Detail,
      path:'detail'

      <!-- 第三种写法 props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail -->
      props($route){
        return{
          id:$route.query.id,
          title:$route.query.title
        }
      }
    }

## <router-link>的replace属性

  1.作用：控制路由跳转时操作浏览器历史记录的模式

  2.浏览器的历史记录有两种写入方式：分别是push和replace,push时追加历史记录，replace时替换当前记录，路由跳转的时候默认为push

  3.如何开启replace模式<router-link replace .....>Message</router-link>

  相当于无痕浏览 不能前进和后退

## 编程式路由导航

  1.作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活

  2.具体编码

    //$router的两个API
    back(m){
      this.$router.push({
        name:'xiangqing',
        query:{
          id:m.id,
          title:m.title
        }
      })
    }
    forward(m){
      this.$router.replace({
        name:'xiangqing',
        query:{
          id:m.id,
          title:m.title
        }
      })
    }
    //前进 this.$router.forward()
    //后退 this.$router.back()

## 缓存路由组件

  1.作用：让不展示的组件保持挂载，不被销毁

  2.具体编码： 

   <keep-alive include='News'>

      <router-view></router-view>

    </keep-alive>

  只让News缓存 其他的不缓存 不加include就是所有点击的组件都缓存

## 路由守卫

  1.作用：对路由进行权限控制

  2.分类，全局守卫，独享守卫，组件内守卫

  3.全局守卫 

   //全局前置守卫，初始化时执行，每次路由切换时执行
    router.beforeEach((to,from,next)=>{
      if(to.meta,isAuth){ //判断当前路由是否需要进行权限控制
        if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
          next()
        }else{
          alert('暂无权限查看')
        }
      else{
        next()//放行
      }
      }
    })
    router.afterEach((to.from) =>{
      console.log()
      if(to.meta.title){
        document.title = to.meta.title //修改网页的title
      }else{
        document.title = 'vue_test'
      }
    })
设置全局路由守卫：
  1.先定义前置路由或者是后置路由守卫,写成箭头函数
    router.beforeEach((to,from,next)=>{
      if(to.meta.isAuth){ //2.判断当前路由是否要进行权限控制
        //权限控制的条件
        if(localStroage.getItem('school') === 'atguigu'){
          next() //放行
        }
      }
    })
  4.独享路由守卫  写在路由里面的 谁想用就写在谁里面
    beforeEnter(to,from,next){
      if(to.mate.isAuth){
        if(localStorage.getIten('school') === 'atguigu'){
          next()
        }else{
          alert('名字不对')
        }
      else{
        next()
      }
      }
    }
  5.组件内守卫
    //进入守卫，通过路由规则，进入该组件时被调用
    beforeRouteEnter(to,from,next){
    }
    //离开守卫，通过路由规则，离开该组件时被调用
    beforeRouteLeave(to.from,next){
    }

## 路由器的两种工作模式

  1.对于一个url来说，什么是hash值? —————— #及其后面的内容就是hash值

  2.hash值不会包含在HTTP请求中，即：hash值不会带给服务器。

  3.hash模式:

    1.地址中永远带着#号，不美观

    2.如果以后将地址通过第三方手机app分享，如果app校验严格，则地址会被标记为不合法。

    3.兼容性好

  4.history模式

    1.地址干净，美观

    2.兼容性和hash模式相比略差

    3.应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题