vue.js路由跳轉(zhuǎn)詳解

發(fā)布時(shí)間：2020-08-21 14:30:59 來源：腳本之家閱讀：127 作者：小坦克的日常欄目：web開發(fā)

本文為大家分享了vue.js路由的跳轉(zhuǎn)，供大家參考，具體內(nèi)容如下

1、路由demo示例

 <div id="app">
  <h2>Hello App!</h2>
  <p>
  <!-- 使用 router-link 組件來導(dǎo)航. -->
  <!-- 通過傳入 `to` 屬性指定鏈接. -->
  <!-- <router-link> 默認(rèn)會被渲染成一個(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)簽，通過to屬性指定鏈接地址。
注意：被選中的router-link將自動添加一個(gè)class屬性值 .router-link-active

1）、router-link的to屬性

這是一個(gè)必須設(shè)置的屬性，否則路由無法生效。它表示路由的鏈接，可以是一個(gè)字符串也可以是一個(gè)描述目標(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>
// 此時(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>

這里如果是簡單的路由跳轉(zhuǎn)，可以寫成to也是可以是：to 或者是v-bind：to

2、replace

一個(gè)布爾類型，默認(rèn)為false。如果replace設(shè)置為true，那么導(dǎo)航不會留下history記錄，點(diǎn)擊瀏覽器回退按鈕不會再回到這個(gè)路由。

<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將自動添加一個(gè)class屬性值.router-link-active，這個(gè)屬性就是來修改這個(gè)class值的。

<!-- 改變r(jià)outer-link的active時(shí)的classname -->
<router-link to="goods" active-class="router-active'></router-link>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

vue.js路由跳轉(zhuǎn)詳解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽