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