vue 2 + vue-router 2 實現SPA

OBKoro1 發布于2019-08-20 13:38 / 3359人閱讀

摘要：標簽是展示我們匹配到的組件的區域。其中可以是通過創建的組件構造器，或者，只是一個組件配置對象。縮寫相當于創建和掛載根實例。創建實例及配置，即。參考文獻官方文檔學習筆記構建單頁應用最佳實戰一個完整的應用起手

github項目地址請點這里。

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

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

HTML





  Hello App!
  
    
    
    
    Go to Foo
    Go to Bar

從HTML文件里面我們需要學會的是：

標簽是我們要跳轉的鏈接，to=""是必須的屬性，雙引號中的內容是我們接下來在JS文件中定義的路由path。

標簽是展示我們匹配到的組件的區域。

JavaScript

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

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

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

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

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

// 現在，應用已經啟動了！

JavaScript文件主要做的事情是：

定義路由列表，即routes。

創建router實例及router配置，即router。

創建和掛載根實例。

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

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

一個html文件：index.html

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

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

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

下面看下這幾個文件的具體內容：

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: "/" 代表應用首頁顯示的內容
    { path: "/", component: HomePage },
    { path: "/chat", component: Chat }
];

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

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

app.vue

自定義組件 homepage.vue

這個組件的內容也是進入應用默認展示的頁面內容。

自定義組件 chat.vue

寫完后你會發現這兩個頁面是互相跳轉的，沒錯，就是這樣。

一般我們會把路由信息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學習筆記： https://segmentfault.com/a/11...

vue2.0構建單頁應用最佳實戰： https://segmentfault.com/a/11...

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

GPU云服務器云服務器 vue.js 2 cdn vue-router vue.js 2.0 cdn java實現2-3樹

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81152.html

Laravel-Vue-SSR-SPA 服務端渲染/單頁面渲染實現骨架

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

zr_hebo 2019-07-01 10:55 評論0 收藏0
Laravel-Vue-SSR-SPA 服務端渲染/單頁面渲染實現骨架

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

U2FsdGVkX1x 2019-08-26 12:22 評論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 2019-08-20 16:44 評論0 收藏0
vue2 + vue-router+ es6，vue2最新SPA項目實戰-仿懂球帝-爆炸足球

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

TigerChain 2019-08-22 11:10 評論0 收藏0