vue.js關於路由的跳轉

一、路由demo示例

    <div id="app">
      <h1>Hello App!</h1>
      <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>

 

二、路由的跳轉

 

router-link是一個組件，默認被渲染成一個帶有連接的a標籤，經過to屬性指定連接地址。

注意：被選中的router-link將自動添加一個class屬性值 .router-link-active

 

一、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

 

對於命名路由示例以下：

 

{
   path: '/moreFunDetail/:id',
   name: 'moreFunDetail',
   component: moreFunDetail
}

<router-link :to="{ name: 'moreFunDetail', params: { id: 123 }}">User</router-link>
點擊這個連接，跳轉到的路徑應該是：moreFunDetail/123，好比在文章列表，訪問單個文章使用，這個id也就是文章的id

 

二、replace 

一個布爾類型，默認爲false。若是replace設置爲true，那麼導航不會留下history記錄，點擊瀏覽器回退按鈕不會再回到這個路由。

<router-link to="goods" replace></router-link>

三、tag 

router-link默認渲染成a標籤，也有方法讓它渲染成其餘標籤，tag屬性就用來設置router-link渲染成什麼標籤的。

<!-- 渲染成li標籤 -->
<router-link to="goods" tag="li"></router-link>

四、active-class 

上面說了被選中的router-link將自動添加一個class屬性值.router-link-active，這個屬性就是來修改這個class值的。

<!-- 改變router-link的active時的classname -->
<router-link to="goods" active-class="router-active'></router-link>