vue-router的使用方法介紹

2018-6-19    seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

vue-router

對(duì)于大多數(shù)單頁(yè)面應(yīng)用，都推薦使用官方支持的 vue-router 庫(kù)。

學(xué)習(xí)網(wǎng)址：https://router.vuejs.org/installation.html#direct-download-cdn

提示：本篇博客僅僅介紹搭建項(xiàng)目之后，再下載vue-router的情況，并非搭建項(xiàng)目是直接引入vue-router。

一、安裝方法（npm方式）

在終端運(yùn)行以下指令

[html] view plain copy
  1. npm install vue-router  

注意：--save 與 --save-dev 的區(qū)別

--save（可以省略） 下載的第三方依賴到package.js中的dependencies。

--save-dev 下載開(kāi)發(fā)時(shí)依賴，指環(huán)境配置，下載到package.js中的devDependencies，webpack、bable等等均屬于開(kāi)發(fā)

時(shí)依賴。

二、導(dǎo)入與使用

vue-router下載之后，需要在入口文件main.js導(dǎo)入，具體做法如下：

[javascript] view plain copy
  1. Vue.use(VueRouter);  
  2. Vue.use(VueAxios, axios);  
  3.   
  4. // routes：數(shù)組，在該數(shù)組中配置所有的路由；  
  5. const routes = [  
  6.   {path:'/',component:myHome,name:'home'},  
  7.   {path:'/product/:productName/:price',component:myProduct,name:'product'}  
  8. ];  
  9. // 創(chuàng)建router實(shí)例  
  10. const router = new VueRouter({  
  11.   routes  
  12. });  
  13. /* eslint-disable no-new */  
  14. new Vue({  
  15.   el: '#app',  
  16.   // 引入到根實(shí)例中才可以使用導(dǎo)航功能  
  17.   router,  
  18.   components: {App},  
  19.   template: '<App/>',  
  20.   data(){  
  21.     return {  
  22.   
  23.     }  
  24.   }  
  25. })  

三、官網(wǎng)介紹使用步驟

網(wǎng)址：https://router.vuejs.org/zh/guide/#javascript

[javascript] view plain copy
  1. // 0. 如果使用模塊化機(jī)制編程，導(dǎo)入Vue和VueRouter，要調(diào)用 Vue.use(VueRouter)  
  2.   
  3. // 1. 定義 (路由) 組件。  
  4. // 可以從其他文件 import 進(jìn)來(lái)  
  5. const Foo = { template: '<div>foo</div>' }  
  6. const Bar = { template: '<div>bar</div>' }  
  7.   
  8. // 2. 定義路由  
  9. // 每個(gè)路由應(yīng)該映射一個(gè)組件。 其中"component" 可以是  
  10. // 通過(guò) Vue.extend() 創(chuàng)建的組件構(gòu)造器，  
  11. // 或者，只是一個(gè)組件配置對(duì)象。  
  12. // 我們晚點(diǎn)再討論嵌套路由。  
  13. const routes = [  
  14.   { path: '/foo', component: Foo },  
  15.   { path: '/bar', component: Bar }  
  16. ]  
  17.   
  18. // 3. 創(chuàng)建 router 實(shí)例，然后傳 `routes` 配置  
  19. // 你還可以傳別的配置參數(shù), 不過(guò)先這么簡(jiǎn)單著吧。  
  20. const router = new VueRouter({  
  21.   routes // (縮寫(xiě)) 相當(dāng)于 routes: routes  
  22. })  
  23.   
  24. // 4. 創(chuàng)建和掛載根實(shí)例。  
  25. // 記得要通過(guò) router 配置參數(shù)注入路由，  
  26. // 從而讓整個(gè)應(yīng)用都有路由功能  
  27. const app = new Vue({  
  28.   router  
  29. }).$mount('#app')  
  30.   
  31. // 現(xiàn)在，應(yīng)用已經(jīng)啟動(dòng)了！  

藍(lán)藍(lán)設(shè)計(jì)( m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)




分享本文至：

日歷

鏈接

個(gè)人資料

存檔