vue-router是vue.js官方路由外掛,它和vue.js是深度整合的,適合用於構建單頁面應用

vue-router是基於路由和元件的

• 路由用於設定訪問路徑,將路徑和元件對映起來

• 在vue-router的單頁面應用中,頁面的路徑的改變就是元件的切換

安裝路由方法：

npm install vue-router

這個一般會在模組化工程中使用它，由於它是一個外掛，所以可以通過Vue.use()來安裝路由功能。

我們在src資料夾下面也可以看到有router資料夾。

router/index.js對router的引入：

//第一步,先引入
import VueRouter from 'vue-router'

//
 
第二步,通過Vue.use(外掛)
//想起Vue還沒匯入
import Vue from 'vue'
Vue.use(VueRouter)

const routers=[
    
]
// 第三步
const router=new VueRouter({
  //配置路由和元件之間的應用關係
  //routers:[]//第五步,把routers抽離到上面去
  routers
})
//第四步,去main.js中掛載,要去別的檔案掛載,那麼在這裡就要把它匯出
export default router

路由對映配置和呈現:

步驟：

1.建立路由元件

2.配置路由對映：元件和路徑對映關係

3.使用路由：通過<router-link>和<router-view>