CODEWITHSUNDEEP
javascriptvue.jsvue-router
user6748331
user6748331

Reputation:

Vue router programmatic navigation not works

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?

Upvotes: 8

Views: 14655

Answers (3)

Luis Alejandro
Luis Alejandro

Reputation: 356

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.

Upvotes: 1

webnoob
webnoob

Reputation: 15934

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.

Upvotes: 9

Thomas
Thomas

Reputation: 2536

Try this:

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

At least this works for me.

Upvotes: 7

Related Questions