Vue.js使用vue-router構建單頁應用

傳統的網頁應用
單頁應用

單頁應用的優缺點

每種技術都有其利弊，單頁應用也是如此。

  • 無刷新體驗，這個應該是最顯著的有點，由于路由分發直接在瀏覽器端完成，頁面是不刷新，對用戶的響應非常及時，因此提升了用戶體驗；
  • 完全的前端組件化，前端開發不再以頁面為單位，更多地采用組件化的思想，代碼結構和組織方式更加規范化，便于修改和調整；
  • API 共享，如果你的服務是多端的（瀏覽器端、Android、iOS、微信等），單頁應用的模式便于你在多個端共用 API，可以顯著減少服務端的工作量。容易變化的 UI 部分都已經前置到了多端，只受到業務數據模型影響的 API，更容易穩定下來，便于提供魯棒的服務；
  • 組件共享，在某些對性能體驗要求不高的場景，或者產品處于快速試錯階段，借助于一些技術（Hybrid、React Native），可以在多端共享組件，便于產品的快速迭代，節約資源。

缺點：

  • 首次加載大量資源，要在一個頁面上為用戶提供產品的所有功能，在這個頁面加載的時候，首先要加載大量的靜態資源，這個加載時間相對比較長；
  • 較高的前端開發門檻，MVC 前置，對前端工程師的要求提高了，不再是『切切圖，畫畫頁面這么簡單』；同時工作量也會增加數倍，開發這類應用前端工程師的數量往往多于后端；
  • 不利于 SEO，單頁頁面，數據在前端渲染，就意味著沒有 SEO，或者需要使用變通的方案。

使用vue-router構建單頁應用

vue-router.js是Vue.js官方的路由插件用于構建單頁面應用。
vue的單頁應用是基于路由和組件的。傳統的頁面應用，是用一些超鏈接來實現頁面切換和跳轉的。在vue-router單面應用中，則是路徑之間的切換，也就是組件的切換。

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

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 使用 router-link 組件來導航. -->
        <!-- 通過傳入 `to` 屬性指定鏈接. -->
        <!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的組件將渲染在這里 -->
    <router-view></router-view>
</div>
  • router-link標簽：跳轉的鏈接，to=""是必須的屬性，雙引號中的內容是我們接下來在JS文件中定義的路由path。
  • router-view標簽：展示我們匹配到的組件的區域。

JavaScript

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

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

// 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的單文件組件；
其次我們通常會希望<router-view>的范圍是整個頁面，而不是像現在這樣一直有幾個礙眼的導航存在于頁面上，這就需要先定義好默認狀態下<router-view>顯示的內容。

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

  • 一個html文件：index.html
  • 一個webpack打包時的入口js文件：main.js
  • 一個根vue組件，作為其他組件的掛載點：app.vue

接下來 我們就創建兩個自定義組件：index.vue和hello.vue。我們希望的結果是他們之間互相跳轉。
我們利用官方提供的腳手架vue-cli工具生成簡單的一個基于webpack打包的vue項目
準備工作：

npm install webpack -g
npm install vue-cli -g
//打開要創建的項目路徑目錄，創建項目
vue init webpack-simple <項目名>
cd <項目名>
//安裝依賴
npm install
//安裝vue-router 
npm install vue-router --save
npm run dev

生成的vue項目如下圖：


一、使用路由

  1. 首先在目錄下創建components文件夾，然后再創建index.vue和hello.vue文件
//index.vue
<template>
    <div>
        <h2>Index</h2>
        <hr>
        <p>{{sContent}}</p>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                sContent:"This is index components"
            }
        }
    }
</script>

//hello.vue
<template>
    <div>
        <h2>Hello Vue.js</h2>
        <hr/>
        <p>{{sContent}}</p>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                sContent:"This is hello components"
            }
        }
    }
</script>
  1. 修改main.js文件
//引入并安裝vue-router插件
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//引入index.vue和hello.vue組件
import App from './App.vue';
import index from './components/index.vue';
import hello from './components/hello.vue';
//定義路由
const routes = [
    {path:'/',component:App},
    { path: '/index', component: index },
    { path: '/hello', component: hello }
]
//創建 router 實例，然后傳 routes 配置
const router=new VueRouter({
  routes
});
//創建和掛載根實例。通過 router 配置參數注入路由，從而讓整個應用都有路由功能
new Vue({
  el:"#app",
  router
});
  1. 修改App.vue
<template>
  <div>
    ![](./assets/logo.png)
    <h1>{{msg}}</h1>
    <ul>
      <router-link to='/index' tag='li'><a href="/index">Index</a></router-link>
      <router-link to='/hello' tag='li'><a href="/hello">Hello</a></router-link>
    </ul>
  </div>
</template>
  1. 修改index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue-webpack-simple</title>
  </head>
  <body>
    <div id="app">
        <router-view></router-view>
    </div>
    <script src="/dist/build.js"></script>
  </body>
</html>

這樣就會把渲染出來的頁面掛載到這個id為app的div里了。

修改后運行的效果如下：


二、重定向 redirect

const routes = [
    { path: '/', redirect: '/index'},     // 這樣進/ 就會跳轉到/index
    { path: '/index', component: index }
]

三、嵌套路由

const routes = [
    { path: '/index', component: index,
        children: [
            { path: 'info', component: {template:'<p>This is info component</p>'}}
        ]
     }
]

四、命名路由

const routes = [
    { path: '/index', component: index,
      name:'index'
    }
]

五、<router-link>標簽屬性

//to屬性 string|object
<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染結果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表達式 -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 帶查詢參數，下面的結果為 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

//replace屬性 true|false 不留下 history 記錄。
<router-link to="home" replace>Home</router-link>

//append屬性 true|false 追加路徑
<router-link to="home" append >Home</router-link>

//tag屬性 string 設置渲染標簽
<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染結果 -->
<li>foo</li>

//active-class 屬性 string 激活時使用的 CSS 類名

五、路由信息對象

  1. $route.path
    字符串，對應當前路由的路徑，總是解析為絕對路徑，如 "/foo/bar"。
  2. $route.params
    一個 key/value 對象，包含了 動態片段 和 全匹配片段，如果沒有路由參數，就是一個空對象。
  3. $route.query
    一個 key/value 對象，表示 URL 查詢參數。例如，對于路徑 /foo?user=1，則有 $route.query.user == 1，如果沒有查詢參數，則是個空對象。
  4. $route.hash
    當前路由的 hash 值 (不帶 #) ，如果沒有 hash 值，則為空字符串。
  5. $route.fullPath
    完成解析后的 URL，包含查詢參數和 hash 的完整路徑。
  6. $route.matched
    一個數組，包含當前路由的所有嵌套路徑片段的 路由記錄 。路由記錄就是 routes 配置數組中的對象副本（還有在 children 數組）。

以上遍是vue-router基本使用方式了
更詳細的vue-router功能請參考文檔：https://router.vuejs.org/zh-cn/

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容