欧美videos另类精品-欧美videos另类极品-欧美vide-欧美va在线视频-欧美va在线观看-欧美va在线播放免费观看

vue-router的使用方法介紹

2018-6-19 seo達人

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

vue-router

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

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

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

一、安裝方法（npm方式）

在終端運行以下指令

                [html] view plaincopy
                
                npm install vue-router

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

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

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

時依賴。

二、導入與使用

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

                [javascript] view plaincopy
                
                Vue.use(VueRouter);  
            
                Vue.use(VueAxios, axios);  
            
                // routes：數(shù)組，在該數(shù)組中配置所有的路由；  
            
                const routes = [  
            
                  {path:'/',component:myHome,name:'home'},  
            
                  {path:'/product/:productName/:price',component:myProduct,name:'product'}  
            
                ];  
            
                // 創(chuàng)建router實例  
            
                const router = new VueRouter({  
            
                  routes  
            
                });  
            
                /* eslint-disable no-new */  
            
                new Vue({  
            
                  el: '#app',  
            
                  // 引入到根實例中才可以使用導航功能  
            
                  router,  
            
                  components: {App},  
            
                  template: '<App/>',  
            
                  data(){  
            
                    return {  
            
                    }  
            
                  }  
            
                })

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

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

                [javascript] view plaincopy
                
                // 0. 如果使用模塊化機制編程，導入Vue和VueRouter，要調(diào)用 Vue.use(VueRouter)  
            
                // 1. 定義 (路由) 組件。  
            
                // 可以從其他文件 import 進來  
            
                const Foo = { template: '<div>foo</div>' }  
            
                const Bar = { template: '<div>bar</div>' }  
            
                // 2. 定義路由  
            
                // 每個路由應該映射一個組件。 其中"component" 可以是  
            
                // 通過 Vue.extend() 創(chuàng)建的組件構造器，  
            
                // 或者，只是一個組件配置對象。  
            
                // 我們晚點再討論嵌套路由。  
            
                const routes = [  
            
                  { path: '/foo', component: Foo },  
            
                  { path: '/bar', component: Bar }  
            
                ]  
            
                // 3. 創(chuàng)建 router 實例，然后傳 `routes` 配置  
            
                // 你還可以傳別的配置參數(shù), 不過先這么簡單著吧。  
            
                const router = new VueRouter({  
            
                  routes // (縮寫) 相當于 routes: routes  
            
                })  
            
                // 4. 創(chuàng)建和掛載根實例。  
            
                // 記得要通過 router 配置參數(shù)注入路由，  
            
                // 從而讓整個應用都有路由功能  
            
                const app = new Vue({  
            
                  router  
            
                }).$mount('#app')  
            
                // 現(xiàn)在，應用已經(jīng)啟動了！

藍藍設計( www.73404.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網(wǎng)站建設、平面設計服務

« 如何成為有交互和視覺思維的UI 設計師？小米8的MIUI10對比MIUI9體驗，外觀UI變化大，是IOS的孿生兄弟？ »

日歷

鏈接

個人資料

藍藍設計的小編 http://www.73404.com.cn

存檔

<strike id="swoew"></strike>

欧美videos另类精品-欧美videos另类极品-欧美vide-欧美va在线视频-欧美va在线观看-欧美va在线播放免费观看

vue-router的使用方法介紹

分類

日歷

鏈接

個人資料

存檔