咸宁网站建设价格哈尔滨企业网站模板建站

在Vue2项目中可以使用this.$router.push等方法进行路由的跳转，但是在Vue3的setup函数里，并没有this这个概念，因此如何使用路由方法

1.// 在新的vue-router里面尤大加入了一些方法，比如这里代替this的useRouter，具体使用如下：
//引入路由函数
import { useRouter } from "vue-router";
//使用
setup() {
    //初始化路由
    const router = useRouter();
    router.push({
        path: "/"
    });
    
    return {};
}
 

2.在vue2中可以通过this来访问到$refs，vue3中由于没有this所以获取不到了，但是官网中提供了方法来获取:

<template>
  <h2 ref="root">姓名</h2>
</template>
<script>
    import { onMounted, ref } from 'vue'
    export default {
        name: 'test9',
        setup(){
            const root  = ref(null)
            onMounted(()=>{
                console.log(root.value);
            })
            return {
                root
            }
        },
    }
</script>

//第二种方法，也可以通过getCurrentInstance来获取
<template>
  <h2 ref="root">姓名</h2>
</template>

<script>
    import { onMounted, ref, getCurrentInstance } from 'vue'

    export default {
        name: 'test9',
        setup(){)
            const {proxy} = getCurrentInstance()
            onMounted(()=>{
                console.log(proxy.$refs.root);
            })
            return {
            }
        },
    }
</script>

3.关于element在vue3的使用方法，没有this.$message等方法解决方案
<template>
  <button @click="doLogin">登录</button>
</template>

<script>
import { getCurrentInstance } from 'vue'
export default {
  name: 'Test',
  setup () {
    const instance = getCurrentInstance() // vue3提供的方法，创建类似于this的实例
    const doLogin = () => {
      instance.proxy.$message({ type: 'error', text: '登录失败' }) // 类似于this.$message()
    }
    return { doLogin }
  },
   // 如果想试用this.$message，须在mounted钩子函数中，setup中没有this实例，
   //但vue3.0中还是建议在setup函数中进行逻辑操作
  mounted () {

    this.$message({ type: 'error', text: '登录失败' })
  }
}
</script>