溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文為大家分享了vue.js路由的跳轉，供大家參考，具體內容如下
1、路由demo示例
<div id="app"> <h2>Hello App!</h2> <p> <!-- 使用 router-link 組件來導航. --> <!-- 通過傳入 `to` 屬性指定鏈接. --> <!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 --> <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、路由的跳轉
router-link是一個組件，默認被渲染成一個帶有鏈接的a標簽，通過to屬性指定鏈接地址。
注意：被選中的router-link將自動添加一個class屬性值 .router-link-active
1）、router-link的to屬性
這是一個必須設置的屬性，否則路由無法生效。它表示路由的鏈接，可以是一個字符串也可以是一個描述目標位置的對象。
<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染結果同上 使用 v-bind 的 JS 表達式 -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- 渲染結果同上 不寫 v-bind 也可以，就像綁定別的屬性一樣 -->
<router-link :to="'home'">Home</router-link>
<!-- 渲染結果同上 -->
<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' }
];
<!-- 帶查詢參數，下面的結果為 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
這里如果是簡單的路由跳轉，可以寫成to也是可以是：to 或者是v-bind：to
2、replace
一個布爾類型，默認為false。如果replace設置為true，那么導航不會留下history記錄，點擊瀏覽器回退按鈕不會再回到這個路由。
<router-link to="goods" replace></router-link>
3、tag
router-link默認渲染成a標簽，也有方法讓它渲染成其他標簽，tag屬性就用來設置router-link渲染成什么標簽的。
<!-- 渲染成li標簽 --> <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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
