vue.js路由跳轉(zhuǎn)詳解
本文為大家分享了vue.js路由的跳轉(zhuǎn)，供大家參考，具體內(nèi)容如下
1、路由demo示例
<div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 組件來導(dǎo)航. --> <!-- 通過傳入 `to` 屬性指定鏈接. --> <!-- <router-link> 默認(rèn)會被渲染成一個 `<a>` 標(biāo)簽 --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的組件將渲染在這里 --> <router-view></router-view> </div>
2、路由的跳轉(zhuǎn)
router-link是一個組件，默認(rèn)被渲染成一個帶有鏈接的a標(biāo)簽，通過to屬性指定鏈接地址。
注意：被選中的router-link將自動添加一個class屬性值 .router-link-active
1）、router-link的to屬性
這是一個必須設(shè)置的屬性，否則路由無法生效。它表示路由的鏈接，可以是一個字符串也可以是一個描述目標(biāo)位置的對象。
<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染結(jié)果同上 使用 v-bind 的 JS 表達(dá)式 -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- 渲染結(jié)果同上 不寫 v-bind 也可以，就像綁定別的屬性一樣 -->
<router-link :to="'home'">Home</router-link>
<!-- 渲染結(jié)果同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
// 此時路由如下定義，name也可為中文
const routes = [
{ path: '/user', component: user, name: 'user' }
];
<!-- 帶查詢參數(shù)，下面的結(jié)果為 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
這里如果是簡單的路由跳轉(zhuǎn)，可以寫成to也是可以是：to 或者是v-bind：to
2、replace
一個布爾類型，默認(rèn)為false。如果replace設(shè)置為true，那么導(dǎo)航不會留下history記錄，點(diǎn)擊瀏覽器回退按鈕不會再回到這個路由。
<router-link to="goods" replace></router-link>
3、tag
router-link默認(rèn)渲染成a標(biāo)簽，也有方法讓它渲染成其他標(biāo)簽，tag屬性就用來設(shè)置router-link渲染成什么標(biāo)簽的。
<!-- 渲染成li標(biāo)簽 --> <router-link to="goods" tag="li"></router-link>
4、active-class
上面說了被選中的router-link將自動添加一個class屬性值.router-link-active，這個屬性就是來修改這個class值的。
<!-- 改變router-link的active時的classname --> <router-link to="goods" active-class="router-active'></router-link>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ElementUI實(shí)現(xiàn)el-table行列合并的操作步驟
在前端開發(fā)中,數(shù)據(jù)展示一直是一個重要的部分,而表格則是數(shù)據(jù)展示最常見的形式之一,ElementUI 是餓了么前端團(tuán)隊(duì)推出的一款基于 Vue 的 UI 組件庫,其中的 el-table 組件是一個功能強(qiáng)大且靈活的表格組件,今天我們要詳細(xì)探討的是 el-table 的行列合并操作2024-08-08
詳解用vue.js和laravel實(shí)現(xiàn)微信授權(quán)登陸
本篇文章主要介紹了詳解用vue.js和laravel實(shí)現(xiàn)微信授權(quán)登陸，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
深入探討Vue計(jì)算屬性與監(jiān)聽器的區(qū)別和用途
在Vue的開發(fā)中,計(jì)算屬性（Computed Properties）和監(jiān)聽器（Watchers）是兩種非常重要的概念,它們都用于響應(yīng)式地處理數(shù)據(jù)變化,本文將帶你深入了解計(jì)算屬性和監(jiān)聽器的區(qū)別,以及在何時使用它們,感興趣的朋友可以參考下2023-09-09
這篇文章主要介紹了在vue中使用scrollTo沒有效果的解決方法,本文給大家分享具體操作步驟,在這里需要注意scrollTo要作用在可滾動的元素上,不然不生效,scrollTop就會一直為0,需要的朋友可以參考下2023-10-10
vue中el-tree?橫向滾動條的實(shí)現(xiàn)
本文詳細(xì)介紹了在Vue框架中使用el-tree組件創(chuàng)建橫向滾動條的方法,通過代碼示例和步驟說明,幫助開發(fā)者理解和實(shí)現(xiàn)橫向滾動功能,感興趣的可以了解一下2024-09-09
Vue 項(xiàng)目部署到服務(wù)器的問題解決方法
本篇文章主要介紹了Vue 項(xiàng)目部署到服務(wù)器的問題解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
vue進(jìn)行下載與處理二進(jìn)制流文件的方法詳解
這篇文章主要為大家詳細(xì)介紹了vue如何實(shí)現(xiàn)將后端返回的二進(jìn)制流進(jìn)行處理并實(shí)現(xiàn)下載,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
這篇文章主要介紹了vue項(xiàng)目配置使用flow類型檢查的步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
組件是可以在自己的模板中調(diào)用自身的,不過他們只能通過name選項(xiàng)來做這件事,下面這篇文章主要給大家介紹了關(guān)于vue3遞歸組件封裝的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了vue 實(shí)例方法和數(shù)據(jù)的相關(guān)資料，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-10-10