快捷導(dǎo)航

vue在.js文件中如何進(jìn)行路由跳轉(zhuǎn)

更新時(shí)間：2022年12月07日 08:46:36 作者：Gabriel.c

這篇文章主要介紹了vue在.js文件中如何進(jìn)行路由跳轉(zhuǎn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue在.js文件中進(jìn)行路由跳轉(zhuǎn)

我們在.vue文件中js跳轉(zhuǎn)路由是this.$router.push("/")

在.js文件中，只需要先引入router 然后 router.push("/") 進(jìn)行跳轉(zhuǎn)

import router from'…/router'
router.push('/');

在ts/js文件中跳轉(zhuǎn)路由寫法（不是在vue文件中跳轉(zhuǎn)路由）

<template>
  <a-button @click="goto">跳轉(zhuǎn)頁面</a-button>
</template>
<script setup name="detail" lang="ts">

  import { useDetail } from './useDetail';

  const { goto } = useDetail();
</script>
<style lang="less" scoped></style>

import { useRouter } from 'vue-router';

export const useDetail = () => {
  // const router = useRouter(); //方法一
  const { replace } = useRouter();//方法二
  const goto = () => {
    // router.replace({ name: 'finance-proj-reimburse-list' }); //方法一
    replace({ path: '/finance/proj-reimburse-list/' });//方法二
  };
  return { goto };
};

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue引用js文件的多種方式(推薦)
這篇文章主要介紹了vue引用js文件的多種方式,本文大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-05-05
Vue實(shí)現(xiàn)登陸跳轉(zhuǎn)
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)登陸跳轉(zhuǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-07-07
vuex模塊獲取數(shù)據(jù)及方法的簡單示例
Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于vuex模塊獲取數(shù)據(jù)及方法的相關(guān)資料,需要的朋友可以參考下
2023-03-03
vue-cli在 history模式下的配置詳解
這篇文章主要介紹了vue-cli在 history模式下的配置詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
vue中LocalStorage與SessionStorage的區(qū)別與用法
本文主要介紹了LocalStorage和SessionStorage。LocalStorage和SessionStorage是兩種存儲(chǔ)方式，本文詳細(xì)的介紹一下區(qū)別以及用法，感興趣的可以了解一下
2021-09-09
vscode中開發(fā)運(yùn)行uniapp項(xiàng)目詳細(xì)步驟
VSCode作為一個(gè)非常強(qiáng)大的代碼編輯器,可以集成眾多的插件和工具來優(yōu)化開發(fā)效率,這篇文章主要給大家介紹了關(guān)于vscode中開發(fā)運(yùn)行uniapp項(xiàng)目的詳細(xì)步驟,需要的朋友可以參考下
2023-07-07
Vue.js常用指令之循環(huán)使用v-for指令教程
這篇文章主要跟大家介紹了關(guān)于Vue.js常用指令之循環(huán)使用v-for指令的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。
2017-06-06
vue全局方法plugins/utils的實(shí)現(xiàn)示例
很多時(shí)候我們會(huì)在全局調(diào)用一些方法,本文主要介紹了vue全局方法plugins/utils的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-07-07
使用vue構(gòu)建移動(dòng)應(yīng)用實(shí)戰(zhàn)代碼
本篇文章主要介紹了使用vue構(gòu)建移動(dòng)應(yīng)用實(shí)戰(zhàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
vue祖孫組件之間的數(shù)據(jù)傳遞案例
這篇文章主要介紹了vue祖孫組件之間的數(shù)據(jù)傳遞案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-12-12