Question

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

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

但是我看到错误：

vue-router.esm.js?8c4f:1897 TypeError: Cannot read property '$router' of undefined
    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 is not defined at eval (VM2993 NaviBar.vue:324)

所以我尝试添加组件：

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

这会给我错误：

Module not found: Error: Can't resolve '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'}); 
}

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

1 个答案: