My programmatic navigation in the component using the vue-router is not working. After the successfull login I want redirect it to the dashboard page. But nothing happens...

Relevant code - the router:

import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'
import Login from '@/components/Login'
import Dashboard from '@/components/Dashboard'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login,
      beforeEnter: (to, from, next) => {
        if (store.getters.isAuthenticated) {
          // if user is already authenticated,
          // redirect it to the dashboard
          next('/dashboard') // it works
        } else {
          next()
        }
      }
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: Dashboard,
      beforeEnter: (to, from, next) => {
        if (store.getters.isAuthenticated) {
          next()
        } else {
          // if user is not authenticated,
          // redirect it to the login
          next('/login') // it works
        }
      }
    }
  ]
})

Method in component:

userLogin () {
  this.authorizeUser({
    name: this.user.name,
    pass: this.user.pass
  }).then(result => {
    console.log('redirected to dashboard')
    this.$router.push('dashboard') // this doesn't work
  })
}

Package.json

{
  "name": "xxx",
  "version": "1.0.0",
  "description": "xxx",
  "author": "xxx",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },
  "dependencies": {
    "amazon-cognito-identity-js": "^1.31.0",
    "axios": "^0.17.1",
    "numeral": "^2.0.6",
    "sweetalert2": "^7.4.0",
    "vee-validate": "^2.0.3",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vue-slider-component": "^2.4.9",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

No errors there, but no action is taken also - I'm still staying on the login page. What am I missing?

EDIT:

This works: this.$router.go('dashboard') Does it mean I'm using the old version?

My programmatic navigation in the component using the vue-router is not working. After the successfull login I want redirect it to the dashboard page. But nothing happens...

Relevant code - the router:

import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'
import Login from '@/components/Login'
import Dashboard from '@/components/Dashboard'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login,
      beforeEnter: (to, from, next) => {
        if (store.getters.isAuthenticated) {
          // if user is already authenticated,
          // redirect it to the dashboard
          next('/dashboard') // it works
        } else {
          next()
        }
      }
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: Dashboard,
      beforeEnter: (to, from, next) => {
        if (store.getters.isAuthenticated) {
          next()
        } else {
          // if user is not authenticated,
          // redirect it to the login
          next('/login') // it works
        }
      }
    }
  ]
})

Method in component:

userLogin () {
  this.authorizeUser({
    name: this.user.name,
    pass: this.user.pass
  }).then(result => {
    console.log('redirected to dashboard')
    this.$router.push('dashboard') // this doesn't work
  })
}

Package.json

{
  "name": "xxx",
  "version": "1.0.0",
  "description": "xxx",
  "author": "xxx",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },
  "dependencies": {
    "amazon-cognito-identity-js": "^1.31.0",
    "axios": "^0.17.1",
    "numeral": "^2.0.6",
    "sweetalert2": "^7.4.0",
    "vee-validate": "^2.0.3",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vue-slider-component": "^2.4.9",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

No errors there, but no action is taken also - I'm still staying on the login page. What am I missing?

EDIT:

This works: this.$router.go('dashboard') Does it mean I'm using the old version?

• javascript
• vue.js
• vue-router

• Regarding your last edit, show us your package.json file. – webnoob Commented Jan 25, 2018 at 11:20
• @webnoob package.json added – user6748331 Commented Jan 25, 2018 at 11:24
• Your versions are fine. I think you'll find that .go is only working by accident as that method takes an interger as a param and navigates to the route with that index. I think the issue you have is you're missing the / before your route. Try this.$router.push('/dashboard') – webnoob Commented Jan 25, 2018 at 12:01
• @webnoob Unfortunately, you are wrong. I din't miss anything, its from the official documentation. So, this.$router.push('/dashboard'), or this.$router.push({ path: '/dashboard' }) doesn't work. And in previous versions of vue-router I saw usage like this this.$router.go('dashboard'), this is why I have suspicion I am using old version. I have really no idea what is happening... – user6748331 Commented Jan 25, 2018 at 12:49
• In that case, to try that theory: npm remove -s vue-router and then npm i -s vue-router and see if it installs the latest version and works. – webnoob Commented Jan 25, 2018 at 12:57

3 Answers 3

Your approach to redirecting is correct and this.$router.push('dashboard') is the correct approach. With that in mind and based on our other tests, remove your beforeEnter from the route as this is the last point in the chain that could cause a problem and stop the redirect.

You'll have to isolate the issue as to why that's not working separately.

Try this:

this.$router.push({ path: '/dashboard' })

At least this works for me.

What's happening is that you are calling this.$router inside of a result => { } context so this is relative to that function. You have to save this from the outside context for it to work.

Put this const router = this.$router; before this.authorizeUser({ and then router.push('dashboard'); and then it will work.