利用vue-router實現二級選單內容轉換

二級選單導航是一種很普遍的功能，一般網頁都會有這個功能。如果是平常的做法就是改變url，跳到對應的頁面；還有一種就是frame。 
如果用vue的話，可以用vue-router改變裡面的元件，這樣就能做到不刷新頁面都能跳到對應「頁面」。其實url位址還是變了，但他沒有刷新頁面其他位置的內容，只是改變了裡面的元件，渲染了新的元件。 

html

使用 Vue.js 時，我們就已經把元件組合成一個應用了，當你要把 vue-router 加進來，只需要設定元件和路由映射，然後告訴 vue-router 在哪裡渲染它們。

<div id="app">
 <div class="leftBox">
 <!-- 使用 router-link 组件来导航. -->
 <!-- 通过传入 `to` 属性指定链接. -->
 <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
 <ul>
 <li><router-link to="/" actived>首页</router-link></li>
 <li><router-link to="/article">文章</router-link></li>
 <li><router-link to="/picture">图片</router-link></li>
 <li><router-link to="/music">音乐</router-link></li>
 </ul>
 </div>
 <div class="rightBox">
 <!-- 路由出口 -->
 <!-- 路由匹配到的组件将渲染在这里 -->
 <router-view></router-view>
 </div>
</div>

js

定義路由。每個路由應該映射一個元件。 其中”component” 可以是組件等。 建立和掛載根實例。記得要透過 router 設定參數注入路由，讓整個應用程式都有路由功能

var Home = {template: &#39;<div>home</div>&#39;}
 
var router = new VueRouter({
 routes: [
 {path: &#39;/&#39;, component: Home},
 {path: &#39;/picture&#39;, component: Picture},
 {path: &#39;/music&#39;, component: Music},
 {path: &#39;/article&#39;, component: Artlist},
 {path: &#39;/article/:id&#39;, component: Article}
 ]
})
new Vue({
 el: "#app",
 router: router
})

切換到了文章部分時，我又弄了個文章列表，點擊文章標題才進入文章內容。

這裡我寫死了數據，實際上可以透過ajax拿到資料賦值。

我模擬了loading…，根據數據驅動的思維，透過v-if="loading"來判斷這個loading是否出現。

動畫切換記得要指定不同的key，不然是沒有效果的。

創建和改變路由的時候，都要透過傳遞url的參數去一個方法拿到數據，這裡就要created和watch '$route'

拿url參數是透過$route.params或$route.query等，具體看教學

返回上一層是用router.go(-1)，相當於按退回按鈕

var Article = {
 template: &#39;<div class="post">\
 <div class="loading" v-if="loading">loading.....</div>\
 <transition name="slide">\
 <div v-if="post" class="content" :key="post.id">\
 <button @click="back">返回</button>\
 <p>{{post.title}}</p>\
 <P>{{post.body}}</P>\
 </div>\
 </transition>\
 </div>&#39;,
 data: function() {
 return {
 loading: false,
 error: null,
 post: null
 }
 },
 created:function() {
 this.fetchData();
 },
 watch: {
 &#39;$route&#39;: &#39;fetchData&#39;
 },
 methods: {
 fetchData:function () {
 this.error = this.post = null;
 this.loading = true;
 getPost(this.$route.params.id,(err,post) => {
 this.loading = false;
 if(err) {
 this.error = err.toString();
 }else {
 this.post = post
 }
 })
 },
 back: function() {
 router.go(-1);
 }
 }
}