如何在VUE3中的此关键字上加载插件，例如路由器，cookie等
我希望将整个VUE2应用程序迁移到VUE3，但我在 this 关键字上面临太多错误。
现在的问题是，
this.$router.push({});
this.$route.params
watch:{
"$route.path" : function(newVal, oldVal){...}
}
我无法在上超载关键字，$ router thisthis。$ 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.js
import { createApp } from 'vue'
import router from "./routes/index.js"
const app = createApp(App)
app.use(router)
现在我已经使用了this。 /代码>＆amp; this。$ route在home home.vue
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>
app.use（router）（router） in main中。 js ，this。$ router是每个组件中的 undefined ，如何在每个组件中使用 this。 this。
I wanted migrate my whole Vue2 app to Vue3 but I'm facing too many errors on this keyword.
Now the problem is
this.$router.push({});
this.$route.params
watch:{
"$route.path" : function(newVal, oldVal){...}
}
I'm not able to overload $router on this keyword, this.$router is undefined in every component. Why is this?
Below file shows my router initialization code
./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;
I have registered router something like this
main.js
import { createApp } from 'vue'
import router from "./routes/index.js"
const app = createApp(App)
app.use(router)
Now I have used this.$router & this.$route something like this inside Home.vue
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>
Despite of doing app.use(router) in main.js, this.$router is undefined in every component, how to make this.$router available in every component?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在Vue 3/vue-router 4中，您需要使用
userOuteruserOuter < /code>和用户oute在组件的设置中以访问路由器和路由。现在，您可以访问路由器和路由，而无需
this。和$。例如router.push（...）和route.params。但是，在模板中，您仍然可以访问$路由器和$路由。
In vue 3 / vue-router 4 you will need to use
useRouteranduseRoutein the setup of your components to access the router and route.Now you can access the router and routes, without the
this.and the$. E.g.router.push(...)androute.params.In the template however, you still have access to $router and $route.