如何在 Vue3 中根据此关键字加载路由器、cookie 等插件

Question

我想将我的整个 Vue2 应用程序迁移到 Vue3，但我在

this

关键字上面临太多错误。

现在的问题是

this.$router.push({});

this.$route.params

watch:{
  "$route.path" : function(newVal, oldVal){...}
}

我无法在

$router

关键字上重载

this

，

this.$router

在每个组件中都未定义。这是为什么？

下面的文件显示了我的路由器初始化代码

./routes/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue';
....
const router = new createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes:[
      {components:Home,name:'home',path:'home'},
      ....
    ]
})
export default router;

我已经注册了类似这样的路由器

main.js

import { createApp } from 'vue'
import router from "./routes/index.js"
const app = createApp(App)
          app.use(router)

现在我在 Home.vue 中使用了

this.$router

和

this.$route

类似的东西

Home.vue

<template>
    <div>some more html code ...</div>
</template>

<script>
export default {
   name:'HomeComponent',
   data(){...},
   methods:{
      goToRoute(name){
         this.$route.push({name:name});
      }
   },
   watch:{
       "$route.path" : function(newVal, oldVal){  
           if(condition matches change route)
        }
   }
}
</script>

<style>

</style>

尽管在

main.js

中做了 app.use(router)，但

this.$router

在每个组件中都是

undefined

，如何使

this.$router

在每个组件中可用？

Answer 1

在 vue 3 / vue-router 4 中，您需要在组件设置中使用 useRouter

 和 

useRoute 来访问路由器和路由。

const router = useRouter();
const route = useRoute();

现在您可以访问路由器和路由，无需

this.

 和 

$

。例如。 

router.push(...)

 和 

route.params

。

但是在模板中，您仍然可以访问 $router 和 $route。