如何在VueJs组件中使用路由器推送？

Question

我有一个navbar组件，我需要重定向到在navbar声明的注销方法中的登录组件。

我试过：this.$router.push({name:'MyLogin'});

但我看到了错误：

vue-router.esm.js?8c4f:1897 TypeError:无法读取未定义的$router属性 at eval (main.js?56d7:68)

如何在组件内部使用路由器推送？

或者如何在此组件中访问路由器。

编辑:

在文件：/src/router.js上，我有登录路由：

export default new Router({
    mode: 'history',
    routes: [
    {
        path: '/login',
        name: 'Login',
        component: LoginView
    },

在文件：/src/components/Navibar.vue中，我使用了doLogout方法：

methods: {
    doLogout(){ 
    this.$router.push({name:'Login'}); 
}

作为Vue js的新手，我尝试了这样的方法：

doLogout(){
   const router = new router({
    routes: [
              { 
                path: '/login', 
                name: 'Login', 
                component: LoginView 
              }               
        ]
  })
 this.$router.push({name:'Login'}); 

}

我看到了错误信息：

doLogout catch ReferenceError: LoginView没有定义在NaviBar.vue:324上(VM2993 NaviBar.vue:324)

因此，我尝试添加组件：

Vue.component('LoginView', require('Login.vue'));

这给了我一个错误：

模块未找到:错误:无法解析“Login.vue”

也许我走错了路？

在一个组件中启用this.$router.push()重定向到另一个组件的正确方法是什么？

Answer 1

试着按以下方式声明：

在文件: /src/router.js

const router = new Router({
    mode: 'history',
    routes: [
    {
        path: '/login',
        name: 'Login',
        component: LoginView
    },
export default router

声明的路由器变量对所有vue组件都是可访问的。

因此，在文件: /src/components/Navibar.vue doLogout方法中：

methods: {
    doLogout(){ 
    this.$router.push({name:'Login'}); 
}