vue路由的使用(一)
阿新 • • 發佈:2018-01-29
outer 圖片 sta info npm highlight ack 配置 cal
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路由的使用(一)