成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue 2 + vue-router 2 實現(xiàn)SPA

OBKoro1 / 3364人閱讀

摘要：標(biāo)簽是展示我們匹配到的組件的區(qū)域。其中可以是通過創(chuàng)建的組件構(gòu)造器，或者，只是一個組件配置對象?？s寫相當(dāng)于創(chuàng)建和掛載根實例。創(chuàng)建實例及配置，即。參考文獻官方文檔學(xué)習(xí)筆記構(gòu)建單頁應(yīng)用最佳實戰(zhàn)一個完整的應(yīng)用起手

github項目地址請點這里。

使用 Vue.js 時，我們就已經(jīng)把組件組合成一個應(yīng)用了，當(dāng)我們要把 vue-router 加進來，只需要配置組件和路由映射，然后告訴 vue-router 在哪里渲染它們。

先來看一下官方提供的最簡單的例子：

HTML 





  
Hello App!

  

    
    
    
    Go to Foo
    Go to Bar

從HTML文件里面我們需要學(xué)會的是：

標(biāo)簽是我們要跳轉(zhuǎn)的鏈接，to=""是必須的屬性，雙引號中的內(nèi)容是我們接下來在JS文件中定義的路由path。

標(biāo)簽是展示我們匹配到的組件的區(qū)域。

JavaScript 
// 0. 如果使用模塊化機制編程，導(dǎo)入Vue和VueRouter，要調(diào)用 Vue.use(VueRouter)

// 1. 定義（路由）組件。
// 也可以從其他文件 import 進來
const Foo = { template: "
foo
" }
const Bar = { template: "
bar
" }

// 2. 定義路由
// 每個路由應(yīng)該映射一個組件。 其中"component" 可以是
// 通過 Vue.extend() 創(chuàng)建的組件構(gòu)造器，
// 或者，只是一個組件配置對象。
const routes = [
  { path: "/foo", component: Foo },
  { path: "/bar", component: Bar }
]

// 3. 創(chuàng)建 router 實例，然后傳 `routes` 配置
// 你還可以傳別的配置參數(shù), 不過先這么簡單著吧。
const router = new VueRouter({
  routes // （縮寫）相當(dāng)于 routes: routes
})

// 4. 創(chuàng)建和掛載根實例。
// 記得要通過 router 配置參數(shù)注入路由，
// 從而讓整個應(yīng)用都有路由功能
const app = new Vue({
  router
}).$mount("#app")

// 現(xiàn)在，應(yīng)用已經(jīng)啟動了！

JavaScript文件主要做的事情是：

定義路由列表，即routes。

創(chuàng)建router實例及router配置，即router。

創(chuàng)建和掛載根實例。

以上只是教我們用最簡單的方法使用vue-router。但實際開發(fā)過程中，首先我們的vue組件顯然不會只有一個template模板這么簡單，會用到vue的單文件組件；其次我們通常會希望的范圍是整個頁面，而不是像現(xiàn)在這樣一直有幾個礙眼的導(dǎo)航存在于頁面上，這就需要先定義好默認(rèn)狀態(tài)下顯示的內(nèi)容。

既然是單頁應(yīng)用（SPA），那么整個項目有以下三個文件是必要的:

一個html文件：index.html

一個webpack打包時的入口js文件：main.js

一個根vue組件，作為其他組件的掛載點：app.vue

另外還有兩個自定義組件：homepage.vue和chat.vue。我們希望的結(jié)果是他們之間互相跳轉(zhuǎn)。

下面看下這幾個文件的具體內(nèi)容：

index.html 



  
  
  
  Vue.js v2
main.js

這里我們選擇把路由配置也寫到main.js中，你也可以寫到一個多帶帶的router.js中再引入到main.js中。

//引入vue、vue-router和根組件app.vue
import Vue from "vue"
import VueRouter from "vue-router"
import App from "./components/app.vue"

Vue.use(VueRouter)

// 引入自定義組件
import HomePage from "./components/homepage.vue"
import Chat from "./components/chat/chat.vue"

//定義路由
const routes = [
    //這里 path: "/" 代表應(yīng)用首頁顯示的內(nèi)容
    { path: "/", component: HomePage },
    { path: "/chat", component: Chat }
];

//創(chuàng)建router實例
const router = new VueRouter({
  //mode指定路由模式，默認(rèn)"hash"，另一種可選的模式是"history"
  mode: "hash",
  routes,
});

new Vue({
  el: "#application",
  router,
  render: h => h(App) //用render函數(shù)渲染引入的組件App.vue到index.html中的#application元素中
})
app.vue
自定義組件 homepage.vue

這個組件的內(nèi)容也是進入應(yīng)用默認(rèn)展示的頁面內(nèi)容。
自定義組件 chat.vue

寫完后你會發(fā)現(xiàn)這兩個頁面是互相跳轉(zhuǎn)的，沒錯，就是這樣。

一般我們會把路由信息routes提取到一個多帶帶的文件中，像這樣：

路由信息提取到多帶帶文件中 route-config.js: 
import HomePage from "./components/homepage.vue"
import Chat from "./components/chat/chat.vue"

export default [
    { 
        path: "/",
        component: HomePage 
    },
    { 
        path: "/chat", 
        component: Chat 
    }
];

然后在main.js中引入： import routes from "./route-config.js" 就可以了。

參考文獻：

vue-router 2官方文檔： http://router.vuejs.org/zh-cn/

Vue-router2.0學(xué)習(xí)筆記： https://segmentfault.com/a/11...

vue2.0構(gòu)建單頁應(yīng)用最佳實戰(zhàn)： https://segmentfault.com/a/11...

一個完整的vue應(yīng)用 ( vuex+vue-router ) 起手： https://segmentfault.com/a/11...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81152.html

相關(guān)文章

  • Laravel-Vue-SSR-SPA 服務(wù)端渲染/單頁面渲染實現(xiàn)骨架

    摘要：提供服務(wù)端渲染單頁面渲染實現(xiàn)骨架同時集成打包構(gòu)建文件名實現(xiàn)內(nèi)置等套件提供端渲染方案前后端分離單頁面方案前后端分離單頁面方案等三種常見方案項目地址歡迎項目需求基于和提供的強大的功能組合并根據(jù)已有項目實踐經(jīng)驗提供完整的集成方案幫助快速 Laravel-Vue-SSR-SPA 提供服務(wù)端渲染/單頁面渲染實現(xiàn)骨架, 同時集成webpack打包構(gòu)建 MD5文件名/gzip 實現(xiàn), 內(nèi)置 vue-...

    zr_hebo 評論0 收藏0

  • Laravel-Vue-SSR-SPA 服務(wù)端渲染/單頁面渲染實現(xiàn)骨架

    摘要：提供服務(wù)端渲染單頁面渲染實現(xiàn)骨架同時集成打包構(gòu)建文件名實現(xiàn)內(nèi)置等套件提供端渲染方案前后端分離單頁面方案前后端分離單頁面方案等三種常見方案項目地址歡迎項目需求基于和提供的強大的功能組合并根據(jù)已有項目實踐經(jīng)驗提供完整的集成方案幫助快速 Laravel-Vue-SSR-SPA 提供服務(wù)端渲染/單頁面渲染實現(xiàn)骨架, 同時集成webpack打包構(gòu)建 MD5文件名/gzip 實現(xiàn), 內(nèi)置 vue-...

    U2FsdGVkX1x 評論0 收藏0

  • 使用 vue2+vue-router2+axios+es6+webpack2 完成的 SPA 個人簡

    showImg(https://segmentfault.com/img/bVN5fu?w=1920&h=4878); 使用es6 vue2 webpack2 vue-router2 axios vue-awesome-swiper vue-spinner SPA 完成的個人簡歷訪問地址：https://github.com/vqlai/vqla...歡迎star，3Q

    CloudwiseAPM 評論0 收藏0

  • vue2 + vue-router+ es6，vue2最新SPA項目實戰(zhàn)-仿懂球帝-爆炸足球

    摘要：爆炸足球模仿懂球帝移動端官網(wǎng)，歡迎各位老鐵地址技術(shù)棧前端后端通過設(shè)置代理的方式請求懂球帝官網(wǎng)獲取數(shù)據(jù)項目截圖安裝與運行建議使用淘寶鏡像服務(wù)端運行訪問項目打包運行打包后代碼有任何問題可以在這里提，謝謝你的支持。歡迎各位老鐵，飛機票 Vue2-football—爆炸足球 模仿懂球帝移動端官網(wǎng)，歡迎各位老鐵stargithub地址：https://github.com/vqlai/vue2....

    TigerChain 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<