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

更新時間：2023年07月05日 14:18:10 作者：o云淡風輕o

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

第六篇講了將SpringBoot和Vue項目結合起來，實現(xiàn)了使用Vue訪問SpringBoot的API。這一篇我們介紹當訪問API成功后跳轉(zhuǎn)到新的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成功后調(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 => {})
    }

然后運行demo1項目和vuetest項目，通過vue項目進入登陸頁面，點擊登陸按鈕，就會跳轉(zhuǎn)到jump1test頁面

成功。

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

您可能感興趣的文章:

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