首頁 web前端 Vue.js vue.js如何設定路由

vue.js如何設定路由

Sep 29, 2021 pm 05:39 PM
vue.js 路由

vue.js設定路由的方法:1、安裝vue-router;2、引用vue-router;3、設定路由文件,如【var router = new VueRouter({routes:[{path:" /hello",component...】。

vue.js如何設定路由

本文操作環境:windows10系統、vue.js 2.9、thinkpad t480電腦。

# vue.js設定路由的方法步驟如下所示:

安裝

npm install --save vue-router
登入後複製

引用

#
import VueRouter from 'vue-router'
登入後複製

設定路由檔案

var router = new VueRouter({
   routes:[
    {
      path:"/hello",
      component:HelloWorld
    },
    {
      path:"/wen",
      component:HelloWen
    }
   ]
   })
    
   new Vue({
   el: '#app',
   components: { App },
   router,
   template: &#39;<App/>&#39;
   })
登入後複製

檢視載入的位置

預設App.vue檔案中加上

跳轉導覽

<router-link to="/hello">helloword</router-link>(渲染出来的是a标签)
登入後複製

推薦學習:php培訓

以上是vue.js如何設定路由的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

在Slim框架中實作API路由的方法 在Slim框架中實作API路由的方法 Aug 02, 2023 pm 05:13 PM

在Slim框架中實作API路由的方法Slim是一款輕量級的PHP微型框架,它提供了一個簡單且靈活的方式來建立Web應用程式。其中一個主要功能是實作API路由,使我們能夠將不同的請求對應到對應的處理程序。本文將介紹如何在Slim框架中實作API路由,並提供一些程式碼範例。首先,我們需要安裝Slim框架。可以透過Composer來安裝最新版本的Slim。打開終端機並

Java Apache Camel:打造靈活且有效率的服務導向架構 Java Apache Camel:打造靈活且有效率的服務導向架構 Feb 19, 2024 pm 04:12 PM

ApacheCamel是一個基於企業服務匯流排(ESB)的整合框架,它可以輕鬆地將不同的應用程式、服務和資料來源整合在一起,從而實現複雜的業務流程自動化。 ApacheCamel使用基於路由的設定方式,可以輕鬆定義和管理整合流程。 ApacheCamel的主要特點包括:靈活性:ApacheCamel可以輕鬆地與各種應用程式、服務和資料來源整合。它支援多種協議,包括Http、JMS、SOAP、FTP等。高效性:ApacheCamel非常高效,它可以處理大量的訊息。它使用非同步訊息傳遞機制,可以提高效能。可擴

如何在Vue專案中使用路由實現頁面切換動畫效果的客製化? 如何在Vue專案中使用路由實現頁面切換動畫效果的客製化? Jul 21, 2023 pm 02:37 PM

如何在Vue專案中使用路由實現頁面切換動畫效果的客製化?引言:在Vue專案中,路由是我們常用的功能之一。透過路由可以實現頁面之間的切換,提供了良好的使用者體驗。而為了讓頁面切換更加生動,我們可以透過客製化動畫效果來實現。本文將介紹如何在Vue專案中使用路由實現頁面切換動畫效果的客製化。建立Vue專案首先,我們需要建立一個Vue專案。可以使用VueCLI來快速搭建

如何在ThinkPHP6中使用路由 如何在ThinkPHP6中使用路由 Jun 20, 2023 pm 07:54 PM

ThinkPHP6是一款強大的PHP框架,具有便利的路由功能,可輕鬆實現URL路由配置;同時,ThinkPHP6也支援多種路由模式,如GET、POST、PUT、DELETE等等。本文將介紹如何使用ThinkPHP6進行路由設定。一、ThinkPHP6路由模式GET方式:GET方式是用來取得資料的一種方式,常用於頁面展示。在ThinkPHP6中,可以使用如下

使用JavaScript函數實現網頁導航和路由 使用JavaScript函數實現網頁導航和路由 Nov 04, 2023 am 09:46 AM

在現代Web應用程式中,實現網頁導航與路由是十分重要的一環。利用JavaScript的函數來實現這個功能,可以讓我們的網路應用程式更加靈活、可擴展且使用者友好。本文將介紹如何使用JavaScript函數來實現網頁導航和路由,並提供具體的程式碼範例。實現網頁導航對於一個Web應用程式而言,網頁導航是使用者操作最頻繁的一個部分。當使用者點擊頁面上的

PHP中靈活配置路由規則的實作方法與經驗總結 PHP中靈活配置路由規則的實作方法與經驗總結 Oct 15, 2023 pm 03:43 PM

PHP中靈活配置路由規則的實作方法和經驗總結引言:在Web開發中,路由規則是非常重要的一部分,它決定了URL與特定的PHP腳本的對應關係。在傳統的開發方式中,我們通常會在路由檔案中設定各種URL規則,然後將URL與對應的腳本路徑進行對應。但是,隨著專案的複雜度增加和業務需求的變化,如果每個URL都需要手動配置,將會變得非常麻煩且不靈活。那麼,在PHP中如何實

如何使用Golang函數處理Web請求路由 如何使用Golang函數處理Web請求路由 May 02, 2024 am 10:18 AM

在Golang中,使用函數處理Web請求路由是一種可擴展、模組化的API建構方法。它涉及以下步驟:安裝HTTP路由器庫。建立一個路由器。為路由定義路徑模式和處理函數。編寫處理函數來處理請求和回傳回應。使用HTTP伺服器運行路由器。這個過程允許在處理傳入請求時使用模組化的方法,從而提高了可重用性、可維護性和可測試性。

如何在Vue中使用路由實現頁面跳轉? 如何在Vue中使用路由實現頁面跳轉? Jul 21, 2023 am 08:33 AM

如何在Vue中使用路由實現頁面跳轉?隨著前端開發技術的不斷發展,Vue.js已經成為了目前最熱門的前端框架之一。而在Vue開發中,實現頁面跳躍是不可或缺的一部分。 Vue提供了VueRouter來管理應用的路由,透過路由可以實現頁面之間的無縫切換。本文將介紹如何在Vue中使用路由實現頁面跳轉,並附有程式碼範例。首先,在Vue專案中安裝vue-router插件。

See all articles