第八篇 - Vue路由跳转步骤

第六篇讲了将SpringBoot和Vue项目结合起来，实现了使用Vue访问SpringBoot的API。这一篇我们介绍当访问API成功后跳转到新的Vue页面怎么处理。

参考链接：https://zhuanlan.zhihu.com/p/468467076

第一步：首先新建一个Vue页面

 jump1test.vue

/* eslint-disable */
<template>
  <div>
    <h1>我是一个jump1</h1>
  </div>
</template>
<script>
export default {
  name: 'jump1test'
}
</script>
<style scoped>

</style>

 

第二步：在index.js配置Vue路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '../components/HelloWorld'
import jump1test from '../components/jump1test'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/jump1test',
      name: 'jump1test',
      component: jump1test
    }
  ]
})

 

第三步：在Login访问API成功后调用新页面

      Login () {
      this.$axios
        .get('http://localhost:8081/api/login', {
          params: {
            username: this.loginForm.username,
            password: this.loginForm.password
          }
        })
        .then(successResponse => {
          console.log(successResponse.data)
          this.$router.push('/jump1test')
        })
        .catch(failResponse => {})
    }

 

然后运行demo1项目和vuetest项目，通过vue项目进入登陆页面，点击登陆按钮，就会跳转到jump1test页面

 

成功。