Vue路由跳轉(zhuǎn)步驟詳解

更新時(shí)間：2023年07月05日 14:18:10 作者：o云淡風(fēng)輕o

這篇文章主要介紹了?Vue路由跳轉(zhuǎn)步驟詳解，主要介紹當(dāng)訪問API成功后跳轉(zhuǎn)到新的Vue頁面怎么處理，感興趣的朋友跟隨小編一起看看吧

第六篇講了將SpringBoot和Vue項(xiàng)目結(jié)合起來，實(shí)現(xiàn)了使用Vue訪問SpringBoot的API。這一篇我們介紹當(dāng)訪問API成功后跳轉(zhuǎn)到新的Vue頁面怎么處理。

參考鏈接：https://zhuanlan.zhihu.com/p/468467076

第一步：首先新建一個(gè)Vue頁面

jump1test.vue

/* eslint-disable */
<template>
  <div>
    <h1>我是一個(gè)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成功后調(diào)用新頁面

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 => {})
    }

然后運(yùn)行demo1項(xiàng)目和vuetest項(xiàng)目，通過vue項(xiàng)目進(jìn)入登陸頁面，點(diǎn)擊登陸按鈕，就會(huì)跳轉(zhuǎn)到j(luò)ump1test頁面

成功。

到此這篇關(guān)于 Vue路由跳轉(zhuǎn)步驟的文章就介紹到這了,更多相關(guān) Vue路由跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue?scoped與深度選擇器deep的原理分析
這篇文章主要介紹了vue?scoped與深度選擇器deep的原理分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue組件間傳遞數(shù)據(jù)的多種方法
在實(shí)際開發(fā)中,Vue組件之間的數(shù)據(jù)傳遞是最常見的需求,由于組件的作用域相互獨(dú)立,如何在父子、兄弟和跨級(jí)組件間傳遞數(shù)據(jù)就顯得尤為重要,本文將詳細(xì)介紹多種Vue組件間傳遞數(shù)據(jù)的方,需要的朋友可以參考下
2025-03-03
Vue開發(fā)Sort組件代碼詳解
這篇文章主要介紹了Vue開發(fā)Sort組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2021-10-10
詳解如何在Vue3中實(shí)現(xiàn)懶加載組件
隨著現(xiàn)代前端框架的發(fā)展,懶加載作為一種優(yōu)秀的性能優(yōu)化技術(shù),在用戶體驗(yàn)和加載速度上扮演著越來越重要的角色,本文將詳細(xì)介紹如何在 Vue 3 中實(shí)現(xiàn)懶加載組件,確保你能夠?qū)⑦@一技術(shù)應(yīng)用到自己的項(xiàng)目中,需要的朋友可以參考下
2024-11-11
vue?axios接口請(qǐng)求封裝方式
這篇文章主要介紹了vue?axios接口請(qǐng)求封裝方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
父子組件生命周期及子組件獲取數(shù)據(jù)傳值問題剖析
這篇文章主要介紹了父子組件生命周期及子組件獲取數(shù)據(jù)問題剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-10-10
vue select二級(jí)聯(lián)動(dòng)第二級(jí)默認(rèn)選中第一個(gè)option值的實(shí)例
下面小編就為大家分享一篇vue select二級(jí)聯(lián)動(dòng)第二級(jí)默認(rèn)選中第一個(gè)option值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
element-ui?tree?手動(dòng)展開功能實(shí)現(xiàn)(異步樹也可以)
這篇文章主要介紹了element-ui?tree?手動(dòng)進(jìn)行展開（異步樹也可以）,項(xiàng)目中用到了vue的element-ui框架，用到了el-tree組件，需要的朋友可以參考下
2022-08-08
vue 1.0 結(jié)合animate.css定義動(dòng)畫效果
本文分步驟給大家介紹了Vue 1.0自定義動(dòng)畫效果，vue1.0代碼結(jié)合animate.css定義動(dòng)畫，頁面一定要引入animate.cdd，具體實(shí)例代碼大家參考下本文
2018-07-07
關(guān)于vue-i18n在單文件js中的使用
這篇文章主要介紹了關(guān)于vue-i18n在單文件js中的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09