vue.js路由的基本使用方式
vue.js路由的基本使用
Vue.js 路由（Vue Router）是 Vue.js 官方提供的一個(gè)插件，用于實(shí)現(xiàn)單頁(yè)應(yīng)用（SPA）的路由功能。
它可以幫助我們?cè)?Vue.js 應(yīng)用中實(shí)現(xiàn)頁(yè)面的切換和導(dǎo)航，以及通過(guò) URL 來(lái)控制頁(yè)面的展示。
在 Vue.js 應(yīng)用中使用路由，需要先安裝 Vue Router。
可以通過(guò)npm或者yarn來(lái)安裝
npm install vue-router # 或者 yarn add vue-router
安裝完成后
在入口文件（一般是 main.js）中引入并使用 Vue Router：
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
然后，定義路由組件，即每個(gè)頁(yè)面對(duì)應(yīng)的組件。
可以在單個(gè)文件中定義一個(gè)組件，也可以使用 Vue 單文件組件。
例如：
<template>
<h1>About</h1>
</template>
<script>
export default {
name: 'About'
}
</script>接下來(lái)：
創(chuàng)建一個(gè)路由實(shí)例，配置路由規(guī)則
const routes = [
{ path: '/', component: Home }, // 根路徑對(duì)應(yīng) Home 組件
{ path: '/about', component: About } // /about 路徑對(duì)應(yīng) About 組件
]
const router = new VueRouter({
routes
})最后：
在 Vue 根實(shí)例中使用路由實(shí)例
new Vue({
router
}).$mount('#app')至此，路由已經(jīng)配置完成。
可以在 Vue 組件中使用 <router-link> 和 <router-view> 標(biāo)簽來(lái)實(shí)現(xiàn)頁(yè)面切換和展示。
<router-link> 是一個(gè)用于導(dǎo)航的鏈接組件，默認(rèn)渲染成一個(gè) <a> 標(biāo)簽。
可以通過(guò) to 屬性指定鏈接的地址，也可以通過(guò) tag 屬性指定渲染成其他標(biāo)簽。
示例：
<router-link to="/">Home</router-link> <router-link to="/about" tag="button">About</router-link>
<router-view> 是一個(gè)用于渲染匹配路由組件的占位符組件。
它會(huì)根據(jù)當(dāng)前路徑匹配對(duì)應(yīng)的組件，并將其渲染在當(dāng)前位置。
示例：
<router-view></router-view>
除了基礎(chǔ)的路由規(guī)則，Vue Router 還提供了其他的一些高級(jí)功能，如動(dòng)態(tài)路由、嵌套路由、路由守衛(wèi)等。
可以參考 Vue Router 的官方文檔來(lái)了解更多詳細(xì)內(nèi)容。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了如何獲取this.$store.dispatch的返回值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue3中導(dǎo)入和使用圖標(biāo)庫(kù)Font Awesome的實(shí)現(xiàn)步驟
Font Awesome 是互聯(lián)網(wǎng)的圖標(biāo)庫(kù)和工具包,被數(shù)百萬(wàn)設(shè)計(jì)師、開發(fā)人員和內(nèi)容創(chuàng)建者使用,Font Awesome的圖標(biāo)非常豐富,基本涵蓋你所需要的所有,本文給大家介紹了Vue3中導(dǎo)入和使用圖標(biāo)庫(kù)Font Awesome的具體步驟,需要的朋友可以參考下2025-01-01
使用vant-picker實(shí)現(xiàn)自定義內(nèi)容,根據(jù)內(nèi)容添加圖標(biāo)
這篇文章主要介紹了使用vant-picker實(shí)現(xiàn)自定義內(nèi)容，根據(jù)內(nèi)容添加圖標(biāo)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了Vue 表情包輸入組件的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
在Vue.js應(yīng)用開發(fā)中,有時(shí)候我們需要在組件內(nèi)部引入外部JavaScript庫(kù)或腳本文件來(lái)增強(qiáng)組件的功能,本文將詳細(xì)探討如何在Vue.js項(xiàng)目中安全有效地引用外部JS文件,并提供一系列示例代碼來(lái)幫助理解這一過(guò)程,需要的朋友可以參考下2024-09-09
vue2基本響應(yīng)式實(shí)現(xiàn)方式之讓數(shù)組也變成響應(yīng)式
這篇文章主要介紹了vue2基本響應(yīng)式實(shí)現(xiàn)方式之讓數(shù)組也變成響應(yīng)式問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue3中的 $attrs 與 Attributes 繼承的相關(guān)資料,首先介紹了什么是Attributes 繼承,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要介紹了vue中如何禁止input框和textarea編輯，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單的輪播圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了Vue中使用axios調(diào)用后端接口的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03