快捷導(dǎo)航

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

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

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

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

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

在.js文件中，只需要先引入router 然后 router.push("/") 進行跳轉(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é)

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

您可能感興趣的文章:

相關(guān)文章

vue元素樣式實現(xiàn)動態(tài)改變方法介紹
vue通過js動態(tài)修改元素的樣式，如果是固定的幾個樣式，我常用的是綁定元素的calss,給不同的class寫好需要的樣式，js控制是否使用這個class
2022-09-09
vue遞歸實現(xiàn)三級菜單
這篇文章主要為大家詳細介紹了vue遞歸實現(xiàn)三級菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-05-05
vue實現(xiàn)微信獲取用戶信息的方法
這篇文章主要介紹了vue實現(xiàn)微信獲取用戶信息的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
淺談vue使用axios的回調(diào)函數(shù)中this不指向vue實例,為undefined
這篇文章主要介紹了淺談vue使用axios的回調(diào)函數(shù)中this不指向vue實例,為undefined，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
vite環(huán)境變量.env文件的配置及使用
在Vite中,我們可以使用環(huán)境變量來管理不同環(huán)境下的配置,本文主要介紹了vite環(huán)境變量.env文件的配置及使用,具有一定的參考價值,感興趣的可以了解一下
2024-06-06
vue3動態(tài)組件使用詳解
這篇文章主要介紹了vue3動態(tài)組件使用詳解的相關(guān)資料,需要的朋友可以參考下
2023-02-02
Vue3+vite實現(xiàn)使用svg可改變顏色的全過程
Vue3 + Vite 使用 SVG 的方法主要是為了引入和利用圖標(biāo)庫、自定義組件以及通過插件簡化項目構(gòu)建過程,這篇文章給大家介紹了Vue3+vite實現(xiàn)使用svg可改變顏色的全過程,需要的朋友可以參考下
2024-07-07
vue實現(xiàn)從外部修改組件內(nèi)部的變量的值
這篇文章主要介紹了vue實現(xiàn)從外部修改組件內(nèi)部的變量的值，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue單個組件實現(xiàn)無限層級多選菜單功能
這篇文章主要介紹了vue單個組件實現(xiàn)無限層級多選菜單的相關(guān)資料，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
2018-04-04
使用elementUI表單校驗函數(shù)validate需要注意的坑及解決
這篇文章主要介紹了使用elementUI表單校驗函數(shù)validate需要注意的坑及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06