Vue路由跳转步骤详解
作者：o云淡风轻o
这篇文章主要介绍了 Vue路由跳转步骤详解，主要介绍当访问API成功后跳转到新的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页面
成功。
到此这篇关于 Vue路由跳转步骤的文章就介绍到这了,更多相关 Vue路由跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！