title: Vue router programmatic navigation not works
body: <p>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...</p>
  
  <p>Relevant code - the router:</p>
  
  <pre><code>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) =&gt; {
          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) =&gt; {
          if (store.getters.isAuthenticated) {
            next()
          } else {
            // if user is not authenticated,
            // redirect it to the login
            next('/login') // it works
          }
        }
      }
    ]
  })
  </code></pre>
  
  <p>Method in component:</p>
  
  <pre><code>userLogin () {
    this.authorizeUser({
      name: this.user.name,
      pass: this.user.pass
    }).then(result =&gt; {
      console.log('redirected to dashboard')
      this.$router.push('dashboard') // this doesn't work
    })
  }
  </code></pre>
  
  <p>Package.json</p>
  
  <pre><code>{
    "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": "&gt;= 6.0.0",
      "npm": "&gt;= 3.0.0"
    },
    "browserslist": [
      "&gt; 1%",
      "last 2 versions",
      "not ie &lt;= 8"
    ]
  }
  </code></pre>
  
  <p>No errors there, but no action is taken also - I'm still staying on the login page. What am I missing?</p>
  
  <p>EDIT:</p>
  
  <p>This works: this.$router.go('dashboard') Does it mean I'm using the old version?</p>