今天講解vue乙個很重要的元件router，熟悉後台開發的人肯定對router有一定的了解，在我們用jinjia2渲染模板的時候，通常都會定義各種各樣的router，router相當於整個專案的導航，每個頁面對應的內容，都通過router來控制。
在建立好了的vue專案中有乙個src/router.js檔案（得在用腳手架建立專案的時候勾選router元件）並且在src/main.js已經將router繫結到vue例項上。
一、main.js註冊router
import vue from 'vue'
import router from './router'
new vue(`)
#將router定義成常量，後續能夠給router新增相應的守衛方法
const router = new router(, # router攜帶的自定義資訊要放在meta中
component: resolve('login')
}]})router.aftereach(to =>
})export default router
在該專案中我引入了element-ui庫
npm install element-uiimport elementui from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'#引入element樣式檔案
vue.use(elementui)
首先建立home.vue
這是頂部導航欄
這是左邊欄
#這是內容區
這樣就解決了上述問題了。
而內容區則可以在路由中進行定義。
假設有兩個頁面，乙個是使用者介面user，另乙個是組介面group
那麼router就可以進行改裝了。
const router = new router(, # router攜帶的自定義資訊要放在meta中
component: resolve('login')
}, ,]
}]})
這裡其實用到了router-view，在router解析的時候會將children裡的component填充到router-view的位置上，當然這裡也可以使用多個router-view，然後新增不同的名字，那麼children裡就需要使用components來進行一一對應，根據不同的名字，會將不同的內容新增到不同的位置。例如：
#這是內容區
children: [
}
router的相關問題進行就到這了，後續會陸續進行補充。謝謝！
vue學徒之基礎配置
對於乙個專案而言，會有自己的一套顏色體系，這個時候會在src資料夾下建立乙個styles，來存放我們的一些對於樣式的基本設定，我在專案中使用scss來編寫html樣式，有層次感並且上手簡單。建立base.color.scss檔案，primarycolor 3f51b5 accentcolor 9e9...
VUE中的路由router
vue router是vue.js官方的路由外掛程式，它和vue.js是深度整合的，適合用於構建單頁面應用。vue的單頁面應用是基於路由和元件的，路由用於設定訪問路徑，並將路徑和元件對映起來。傳統的頁面應用，是用一些超連結來實現頁面切換和跳轉的。在vue router單頁面應用中，則是路徑之間的切換...
vue路由router的實現
1.安裝router 安裝 npm install vue router或cnpm install vue router或yarn add vue router 2.在src目錄下新建乙個router.js檔案引用如下 import vue from vue import vuerouter fro...