快捷導(dǎo)航

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

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

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

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

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

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

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訪問(wèn)API成功后調(diào)用新頁(yè)面

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)目，通過(guò)vue項(xiàng)目進(jìn)入登陸頁(yè)面，點(diǎn)擊登陸按鈕，就會(huì)跳轉(zhuǎn)到j(luò)ump1test頁(yè)面

成功。

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

您可能感興趣的文章:

相關(guān)文章

基于vue-cli、elementUI的Vue超簡(jiǎn)單入門小例子（推薦）
這篇文章主要介紹了基于vue-cli、elementUI的Vue超簡(jiǎn)單入門小例子，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
詳解Vue中watch的詳細(xì)用法
在vue中，使用watch來(lái)響應(yīng)數(shù)據(jù)的變化。watch的用法大致有三種。下面代碼是watch的一種簡(jiǎn)單的用法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-11-11
淺談vue方法內(nèi)的方法使用this的問(wèn)題
今天小編就為大家分享一篇淺談vue方法內(nèi)的方法使用this的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue切換菜單取消未完成接口請(qǐng)求的案例
這篇文章主要介紹了vue切換菜單取消未完成接口請(qǐng)求的案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
Vue2+Element-ui實(shí)現(xiàn)el-table表格自適應(yīng)高度的案例
這篇文章主要介紹了Vue2+Element-ui實(shí)現(xiàn)el-table表格自適應(yīng)高度的案例,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-06-06
vue vuex vue-rouert后臺(tái)項(xiàng)目——權(quán)限路由（適合初學(xué)）
這篇文章主要介紹了vue vuex vue-rouert后臺(tái)項(xiàng)目——權(quán)限路由，通過(guò)本文可以很清除的捋清楚vue+vuex+vue-router的關(guān)系，本版本非常簡(jiǎn)單，適合初學(xué)者,需要的朋友可以參考下
2017-12-12
vue?router進(jìn)行路由跳轉(zhuǎn)并攜帶參數(shù)的實(shí)例詳解(params/query)
在使用`router.push`進(jìn)行路由跳轉(zhuǎn)到另一個(gè)組件時(shí)，可以通過(guò)`params`或`query`來(lái)傳遞參數(shù)，這篇文章主要介紹了vue?router進(jìn)行路由跳轉(zhuǎn)并攜帶參數(shù)（params/query）,需要的朋友可以參考下
2023-09-09
如何解決Vue請(qǐng)求接口出現(xiàn)跨域問(wèn)題Access-Control-Allow-Origin
這篇文章主要介紹了如何解決Vue請(qǐng)求接口出現(xiàn)跨域問(wèn)題Access-Control-Allow-Origin,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue3?中?watch?與?watchEffect?區(qū)別及用法小結(jié)
這篇文章主要介紹了Vue3?中?watch?與?watchEffect?有什么區(qū)別？watch中需要指明監(jiān)視的屬性，也需要指明監(jiān)視的回調(diào)，而watchEffect中不需要指明監(jiān)視的屬性，只需要指明監(jiān)視的回調(diào)，回調(diào)函數(shù)中用到哪個(gè)屬性，就監(jiān)視哪個(gè)屬性，本文給大家詳細(xì)介紹，需要的朋友參考下
2022-06-06
vue中自定義指令（directive）的基本使用方法
Vue中內(nèi)置了很多的指令,但有時(shí)候這些指令并不能滿足我們,或者說(shuō)我們想為元素附加一些特別的功能,這時(shí)候我們就需要用到vue中一個(gè)很強(qiáng)大的功能了—自定義指令,這篇文章主要給大家介紹了關(guān)于vue中自定義指令（directive）的基本使用方法,需要的朋友可以參考下
2021-09-09