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、路由？
vue的路由传参有两种，分别是：query和params传参

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

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

使用 useRoute,useRouter

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

5、 路由守卫（拦截）？

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);
})