Vue.js的路由之——vue-router快速入門

直接先上效果圖

 

這個單頁面應用有兩個路徑：/home和/about，與這兩個路徑對應的是兩個組件Home和About。

 

整個實現過程

JavaScript

1. 建立組件：建立單頁面應用須要渲染的組件
2. 建立路由：建立VueRouter實例
3. 映射路由：調用VueRouter實例的map方法
4. 啓動路由：調用VueRouter實例的start方法

HTML

1. 使用v-link指令
2. 使用<router-view>標籤

router.redirect

應用在首次運行時右側是一片空白，應用一般都會有一個首頁，例如：Home頁。
使用router.redirect方法將根路徑重定向到/home路徑：

router.redirect({
    '/': '/home'
})

router.redirect方法用於爲路由器定義全局的重定向規則，全局的重定向會在匹配當前路徑以前執行。

 

執行過程

當用戶點擊v-link指令元素時，咱們能夠大體猜測一下這中間發生了什麼事情：

• vue-router首先會去查找v-link指令的路由映射
• 而後根據路由映射找到匹配的組件
• 最後將組件渲染到<router-view>標籤

 

1. 建立組件

首先引入vue.js和vue-router.js：

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

而後建立兩個組件構造器Home和About：

var Home = Vue.extend({
    template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
    data: function() {
        return {
            msg: 'Hello, vue router!'
        }
    }
})
 
var About = Vue.extend({
    template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
})

2. 建立Router

var router = new VueRouter()

調用構造器VueRouter，建立一個路由器實例router。

3. 映射路由

router.map({
    '/home': { component: Home },
    '/about': { component: About }
})

調用router的map方法映射路由，每條路由以key-value的形式存在，key是路徑，value是組件。
例如：'/home'是一條路由的key，它表示路徑；{component: Home}則表示該條路由映射的組件。

4. 使用v-link指令

<div class="list-group">
    <a class="list-group-item" v-link="{ path: '/home'}">Home</a>
    <a class="list-group-item" v-link="{ path: '/about'}">About</a>
</div>

在a元素上使用v-link指令跳轉到指定路徑。

5. 使用<router-view>標籤

<router-view></router-view>

在頁面上使用<router-view></router-view>標籤，它用於渲染匹配的組件。

6. 啓動路由

var App = Vue.extend({})
router.start(App, '#app')

路由器的運行須要一個根組件，router.start(App, '#app') 表示router會建立一個App實例，而且掛載到#app元素。注意：使用vue-router的應用，不須要顯式地建立Vue實例，而是調用start方法將根組件掛載到某個元素。