本文為大家分享了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é)果同上  不寫 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)，可以寫成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>