Vue-router2.0學習筆記

hieeyh發表於2016-12-16
Vue筆記

Vue.js的一大特色就是構建單頁面應用十分方便，既然要方便構建單頁面應用那麼自然少不了路由，vue-router就是vue官方提供的一個路由框架。總體來說，vue-router設計得簡單好用，下面就來聊聊我實際用到過的一些方法，文章沒有提到的可以去檢視官方文件。vue-router的安裝這裡就不提了，相信會來看這篇部落格同學，這些基本能力都是有的。

先上例子

<!-- html部分，省略head -->
<div id="app">
    <div class="content">
        <router-link to="/goods">商品</router-link>
        <router-link to="/ratings">評論</router-link>
        <router-link to="/seller">商家</router-link>
    </div>
    <router-view></router-view>
</div>
<script src="path-to-vue"></script>
<script src="path-to-vue-router"></script>
// 首先定義或者引入路由的元件
// 方法一：直接定義路由元件
const goods = { template: `<p>goods</p>` };
const ratings = { template: `<p>ratings</p>` };
const seller = { template: `<p>seller</p>` };
// 方法二：import引入路由元件
import goods from `components/goods/goods`;
import ratings from `components/ratings/ratings`;
import seller from `components/seller/seller`;
// 然後定義路由(routes)，components還可以是Vue.extend()建立的
const routes = [
  { path: `/goods`, component: goods },
  { path: `/ratings`, component: ratings },
  { path: `/seller`, component: seller }
];
// 接著建立路由例項
const router = new VueRouter({
  // ES6縮寫語法，相當於routes:routes
  routes  
});
// 最後建立vue例項並掛載
const app = new Vue({
  el: `#app`,
  router
});
// 或者
const app = new Vue({
  router
}).$mount(`#app`)

到這裡就可以用vue-router輕鬆搭建一個單頁面應用了。我一般都是使用模組化程式設計的形式，用.vue單檔案，不知道在模組化程式設計裡怎麼載入vue-router的可以參考我的某個專案原始碼。

router-link和router-view

看了上面的例子，一定對router-link和router-view很感興趣。

router-link

從上面例子中的書寫形式就可以看出，router-link是一個元件，它預設會被渲染成一個帶有連結的a標籤，通過to屬性指定連結地址。
注意：被選中的router-link將自動新增一個class屬性值.router-link-active。

router-link屬性配置

to

這是一個必須設定的屬性，否則路由無法生效。它表示路由的連結，可以是一個字串也可以是一個描述目標位置的物件。

<router-link to="goods"></router-link>
<router-link to="{path=`goods`}"></router-link>

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-view

這個元件十分關鍵，它就是用來渲染匹配到的路由的。
可以給router-view元件設定transition過渡，具體用法見Vue2.0 Transition常見用法全解惑。
還可以配合<keep-alive>使用，keep-alive可以快取資料，這樣不至於重新渲染路由元件的時候，之前那個路由元件的資料被清除了。比如對當前的路由元件a進行了一些DOM操作之後，點選進入另一個路由元件b，再回到路由元件a的時候之前的DOM操作還儲存在，如果不加keep-alive再回到路由元件a時，之前的DOM操作就沒有了，得重新進行。如果你的應用裡有一個購物車元件，就需要用到keep-alive。

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

一些小需求怎麼實現

不同路由不同頁面標題

多頁面應用我們可以給每一個頁面都設定一個不同的標題，但是如果是單頁面應用的路由呢？其實也是可以實現的，實現的方法不止一種，我之前用的是結合命名路由和導航鉤子函式的方法。如下：

// 定義路由的時候如下定義，name也可為中文
const routes = [
  { path: `/goods`, component: goods, name: `goods` },
  { path: `/ratings`, component: ratings, name: `ratings` },
  { path: `/seller`, component: seller, name: `seller` }
];
// 建立路由例項
const router = new VueRouter({
  routes: routes
})
// 關鍵在這裡，設定afterEach鉤子函式
router.afterEach((to, from, next) => {
  document.title = to.name;
})

命名路由

既然用到了命名路由，這裡就提一下吧。命名路由就是用一個名稱來標識一個路由，在定義路由的時候設定一個name屬性即可。在router-link中也可以用路由的名字來連結到一個路由。

<router-link :to="{ name: `seller`}">seller</router-link>

導航鉤子

這個我還沒怎麼用過，它主要是用來攔截導航的，想使用的參考官方文件吧。

怎麼剛進入應用就渲染某個路由元件

剛進入應用都是進入到“/”這個路由的，如果想直接進入到“/goods”怎麼辦，這裡提供兩種方法。一種是利用重定向，另一種是利用vue-router的導航式程式設計。

重定向

const routes = [
  { path: `/`, redirect: `/goods`}
]

是不是很簡單呢？重定向的目標也可以是一個命名的路由。

const routes = [
  { path: `/`, redirect: { name: `goods` }}
]

導航式程式設計

利用vue-router的導航式程式設計的router.push方法也可以實現上面的需求。

// 在建立vue例項並掛載後呼叫
router.push(`/goods`)

router.push方法就是用來動態導航到不同的連結的。它會向history棧新增一個新的記錄，點選<router-link :to="...">等同於呼叫router.push(…)。

vue-router中還有router.replace方法和router.go方法，概念及用法可參考https://router.vuejs.org/zh-cn/essentials/navigation.html。

相關文章