vuex和vue的路由

1. 如何获取公共的属性和方法 ？

获取实例通过   getCurrentInstance  [ 获取实例上下文 ]

//  引入

import { getCurrentInstance }  from  'vue';

// 获取实例上下文

let  { appContext }  =  getCurrentInstance()
console.log(appContext.config.globalProperties);

在组合API内使用： getCurrentInstance()返回一个对象


vue3获取实例方法

2. vue3的生命周期？

vue3 生命周期函数
 * vue2                        vue3
 * beforeCreate                setup组合api
 * created
 *
 * beforeMount                 on-
 * mounted                     on-
 *
 * beforeUpdate                on-
 * updated                     on-
 *
 * boforeDestory              onBeforeUnmounted
 * destoried                  onUnmounted

3.组件传值 ？

props：接收父组件传过来的值
如果想要在setup中使用父组件传来的数据    【props.数据】

attrs属性：jq的写法是：$('.a).attr()
vue3:父传子的属性，没有使用props接收，也可以使用attr获取接收

setup(props.ctx){
   let { emit } = ctx;
   emit('事件名称')
}

在vue2中是通过this.$emit()调用，this.$emit('自定义的事件名称',传递的值)

4. vuex？

首先：vuex不是内置的，如果有需要，需要我们自己下载
1.下载通过 npm install vuex --save

2.新建一个js文件，引入vuex

import vue  from  ' vue'
import Vuex  from  ' vuex '
Vue.use(Vuex)
导出之后，在main.js中引入


vuex的含义:vuex是一个状态管理工具，，实现数据共享，方便后期维护和修改

5个核心：state   mutations   actions   modules   getters

获取值：state：$store.state.属性名
        getters：$store.getters.属性名
        mutations：$store.commit('mutations内的方法名')
        actions：$store.dispatch('actions内的方法名')
        modules：模块


辅助函数：可以在页面中直接调用，需要映射到页面      映射的值必须写在计算属性中
          映射后可以直接通过this调用

5. 路由？

vue的路由传参有两种，分别是：query和params传参

query：跳转，传参数               params：接收参数

vue3 内 组合api 使用
     *  该如何使用路由呢
     *  import {useRoute,useRouter} from 'vue-router'
     *  useRoute -- 接收的
     *  useRouter -- 跳转 传参数

使用 useRoute,useRouter

跳转 传参数;函数执行之后；就可以和vue2内的this.$router一样使用

query:传参数：
router.push('/)

router.push({}) ---  path 或者name
 
刷新不丢失

接参数的时候:this.$route.query

router.push({path:'/',query:{name:'123',age:12}})

可以是这样的也可以是字符串
router.push('/about?name=2014$age=123')





params:传递参数
router.push({name:''，params:{}}

name：只能使用路由名称

params：参数

刷新页面，参数会丢失

获取参数的时候：router.params

6. 路由守卫（拦截）？

1。 全局的
      前置守卫：router.beforeEach((to,from,next)=>{})

      贫僧去往西天拜佛求经 ； 从东土大唐而来；

      to-到哪里去  from -- 从哪里来  next -- 重定向

     后置守卫：router.afterEach((to,from)=>{}) 没有next

2。 组件的 都会有 三个参数 to from next

       beforeRouteEnter -- 路由进入之前
       beforeRouteUpdate -- 路由更新之前 (特定的指 组件没变；路由变了--动态路由)
       beforeRouteLeave  --- 路由离开之前
 
3。 独享的

     beforeEnter--是写在路由配置里面的

举个小案例：

如果说没有登录的情况下；别管用户想去哪个页面；我们都会重定向到登录页面

 如果用户登录了；我们就不让他在进入登录页面了

router.beforeEach((to, from, next) => {
    // console.log(to, from, next);
    // console.log(store.state);
    // console.log(from.name)
  const token = store.state.token;
  if (!token && to.name!='Login') {
    // about -- > login
    // login -- > login
    next("login");
  }

  if(token && to.name=='Login'){
    next('/')
  }
  next()
});

router.afterEach((to,from,next)=>{
    console.log('afterEach',to, from, next);
})