第六篇讲了将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,jump1test,第八篇,HelloWorld,vue,跳转,import From: https://www.cnblogs.com/smart-zihan/p/17528362.html