1.路由的安裝

這一步我簡單說一下，重心放在如何去使用路由上面。

如果是用vue-cli來構建vue項目，在使用

vue init webpack 項目名稱

構建的時候會提示你是否安裝vue-router，選擇Y即可。

如果在初始時沒有安裝路由：

npm install vue-router

並在模塊中引入vue-router：

import Vue from ‘vue‘

import VueRouter from ‘vue-router‘

Vue.use(VueRouter)

2.最為簡單的路由跳轉

先看一個demo：

此時頁面效果：

點擊bar：

頁面跳轉到了bar：

3.分析一下該demo的代碼

該demo的目錄結構：

Bar、Foo是兩個很簡單的組件，沒有做任何css樣式：

再來看一下app.vue:

router的配置：

在進入根頁面localhost:8081後會渲染app.vue組件，並重定向到/foo組件

foo組件將會渲染到<router-view></router-view>標簽下。

vue路由的使用（一）