1. 程式人生 > >Vue之行(二) 如何匯入路由簡單使用

Vue之行(二) 如何匯入路由簡單使用

其實vue.router的使用,就是將元件 (components) 對映到路由 (routes),然後告訴 Vue Router 在哪裡渲染它們。 vue-router網址:

1 在終端安裝下載 cnpm install vue-router --save

2 在main.js中引入 import import VueRouter from 'vue-router'

3 這一步非常重要 相當於註冊路由 讓它可以$router 全域性使用 Vue.use(VueRouter)

4.元件導航渲染 使用router-link元件來導航 通過to屬性指定連結。預設會渲染成一個a標籤。想渲染到哪裡級把router-view寫到哪裡

<router-link to="/index">首頁</router-link>
 <router-view></router-view>

4.寫的元件都要引入到main.js中 這樣在路由中的元件才能訪問到寫的元件 在這裡插入圖片描述 4 定義路由規則(相當於建立一個數組) 在這裡插入圖片描述 5.例項化路由物件 在這裡插入圖片描述 6.最後掛載到例項上 在這裡插入圖片描述