时间戳

首页 > 解决方案 > 如何在 VueJs 组件中使用路由器推送？

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

问题描述

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

我试过了：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'));

这给了我错误：

找不到模块：错误：无法解析“Login.vue”

也许我做错了步骤？

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

标签： javascriptvuejs2

解决方案

尝试如下声明：

在文件：/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'}); 
}

推荐阅读