webpack入坑之旅（六）配合vue-router實現SPA

時間  2019-11-20
標籤 webpack 之旅 配合 vue router 實現 spa 简体版
原文   原文鏈接

 

在上面的練習當中咱們已經成功的加載了一個.vue格式的單文件組件，而且實現了在使用vue狀況下的自動刷新。javascript

可是咱們最終的目的仍是要實現單頁面應用程序，這個時候咱們就必不可少的須要使用到路由管理器來進行SPA的開發，vue官方爲咱們提供了一個官方庫vue-router，而且配有對應的中文文檔。關於裏面的內容你們自行前去觀看。在這裏，只會把咱們須要的東西拿出來說。css

vue組件

官網對於組件講解html

在Vue中定義一個組件很是簡單，只須要一對自定義標籤，在其中填入內容就能夠進行咱們的組件編寫了，而後使用Vue.component()去註冊咱們的組件下面來看一個例子，來直觀的看看vue的組件。vue

組件入門

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
    <script src="js/vue.js"></script>
<body>
 <div id="app">
 <my-component></my-component>
 <!-- 自定義標籤做爲組件名稱 -->
 <my-component></my-component>
 <!-- 複用 -->
 </div>
 <script>
 // 定義而且註冊組件
 // 在官方的示例中使用 Vue.extend({})先註冊了一個定義模板，再引用，看我的喜愛吧
 Vue.component("my-component", {
 template:"<h2>hello Vue component</h2>"
 })
 // 建立根實例
 // 在這裏 定義而且註冊組件 必須建立根實例前，否則會報錯，由於解析順序的問題？
 new Vue({
 el:"#app"
 });
 </script>
</body>

上面就是最簡單的定義組件的方式，template屬性中寫的東西:就是<my-component>這個自定義標籤渲染後展示出來的樣式，這裏渲染爲：java

1
2
3
4
 
<div id="app">
 <h2>hello Vue component</h2>
 <h2>hello Vue component</h2>
</div>

組件的基礎介紹就到這，更多詳細內容請移步官網,有着很是清晰的講解。webpack

vue-router

剛剛已經對於vue的組件有了必定的瞭解。如今來結合vue-router，來進行一下動態的切換。git

首先是安裝，若是使用npm的形式的話，直接運行npm install vue-router --save,就能夠看到vue-router，已經被添加到了項目依賴中。直接上ES6的語法來進行引入github

1
2
3
 
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

起步

其實這一部分vue-router的中文文檔中已經講的很是詳細了。。在這裏與它不一樣的是它用的CommonJS的規範來進行模塊安裝，而我使用ES6的import，有興趣本身去看- -。其餘的內容我就直接扒下來了。web

html:vue-router

1
2
3
4
5
6
7
8
9
10
 
<div id="app">
 <h1>Hello App!</h1>
 <p>
 <!-- 使用指令 v-link 進行導航。 -->
 <a v-link="{ path: '/foo' }">Go to Foo</a>
 <a v-link="{ path: '/bar' }">Go to Bar</a>
 </p>
 <!-- 路由外鏈 -->
 <router-view></router-view>
</div>

javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
// 定義組件
var Foo = Vue.extend({
 template: '<p>This is foo!</p>'
})
var Bar = Vue.extend({
 template: '<p>This is bar!</p>'
})
// 路由器須要一個根組件。
// 出於演示的目的，這裏使用一個空的組件，直接使用 HTML 做爲應用的模板
var App = Vue.extend({})
// 建立一個路由器實例
// 建立實例時能夠傳入配置參數進行定製，爲保持簡單，這裏使用默認配置
var router = new VueRouter()
// 定義路由規則
// 每條路由規則應該映射到一個組件。這裏的「組件」能夠是一個使用 Vue.extend
// 建立的組件構造函數，也能夠是一個組件選項對象。
// 稍後咱們會講解嵌套路由
router.map({
 '/foo': {
 component: Foo
 },
 '/bar': {
 component: Bar
 }
})
// 如今咱們能夠啓動應用了！
// 路由器會建立一個 App 實例，而且掛載到選擇符 #app 匹配的元素上。
router.start(App, '#app')

我我的感受這部分仍是很好理解的，官方也給了一系列的例子：查看倉庫的 README.md 來運行它們。很好的展示了它的路由切換。

簡單的介紹到這，下面最重要的部分到了，看看如何結合咱們定義的.vue單文件組件。

首先來看咱們的文件目錄結構：

01-webpack-vuerouter

定義路由規則

最主要是main.js 的變化，直接在文件中講解了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 引入vue以及vue-router的。
// 0. 若是使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)

// 1. 定義 (路由) 組件。
// 能夠從其餘文件 import 進來

// 引入組件！
import App from './App.vue'
import Index from './components/index.vue'
import List from './components/list.vue'
import Hello from './components/hello.vue'

// 2. 定義路由
// 每一個路由應該映射一個組件。 其中"component" 能夠是
// 經過 Vue.extend() 建立的組件構造器，
// 或者，只是一個組件配置對象。
// 咱們晚點再討論嵌套路由。
const routes = [
 {
 path: '/index',
 component: Index,
 children: [
 { path: 'hello', component: Hello }
 ]
 },
 {
 path: '/list',
 component: List
 },
 {
 path: '*',
 redirect: '/index'
 }
]

// 3. 建立 router 實例，而後傳 `routes` 配置
// 你還能夠傳別的配置參數, 不過先這麼簡單着吧。
const router = new VueRouter({
 routes // (縮寫) 至關於 routes: routes
})

// 4. 建立和掛載根實例。
// 記得要經過 router 配置參數注入路由，
// 從而讓整個應用都有路由功能
new Vue({
 el: '#app',
 router,
 render: h => h(App)
})

// 如今，應用已經啓動了！

App.vue 須要有用於渲染匹配的組件，以下

1
2
3
 
<template>
 <router-view></router-view>
</template>

如今當咱們運行 npm start 進入http://localhost:8080/就會自動跳轉到http://localhost:8080/#/index，而且讀取裏面的內容。

實現路由跳轉

主要抽出index.vue中的內容來說解，的內容是：(list.vue裏面的內容自行設置查看吧)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<template>
<div>
 <h1>姓名：{{name}}</h1>
 <h2>{{age}}</h2>
 <button @click="golist">$route.push查看</button>
 <router-link :to="{ path: '/list' }">v-link查看列表</router-link>
 <router-link :to="{ path: '/index' }">回去主頁</router-link>
 <router-link :to="{ path: '/index/hello' }">嵌套的路由</router-link>
 <hello></hello>
 <router-view></router-view>
</div>
</template>
<script>
 // import hello from "./hello.vue"
 export default {
 data () {
 return {
 name:"guowenfh",
 age:"21"
 }
 },

 methods :{
 golist (){
 this.$router.push({path:"/list"})
 // this.$route.router.go({name:"list"});
 }
 }
 }
</script>
<style></style>
<!-- 樣式自行設置，或者直接看源碼就好 -->

由於自刷新的緣故，直接切換到瀏覽器。

點擊上面使用的router-link，與this.$router.push的方式均可以跳轉到list定義的路由。（觀察瀏覽器地址欄的變化）在這裏咱們使用 { path: '/list' } ,若有別名的話，使用的{name:"list"}，會有一樣的效果。

Vue組件的嵌套

在第一小點裏面咱們看到了在頁面內的組件的使用方法，第二小點中學習到了vue-router的制定路由規則。

看過這兩個地方以後，咱們把思惟發散開來，應該就能舉一反三的想到如何在頁面中嵌套加載別的組件了。
咱們建立一個hello.vue ，裏面內容隨意。如今咱們若是要在app.vue中加載它，那麼只須要在app.vue中使用import hello from "./hello.vue"（其實這個達到了使用require兩步的效果。引入賦值）。

引入以後，只須要以下注冊：

1
2
3
4
5
6
 
export default {
 //其它的就
 components:{
 hello//若還有更多的組件，只須要在import的狀況下，以逗號分割，繼續註冊就好
 }
}

最後在app.vue中添加<hello></hello>這一對自定義標籤，就能夠實現加載hello.vue中的內容。

組件的嵌套也就是這樣，很簡單的描述完了，可是怎麼樣去抽離組件，在工做中積累能夠複用的組件纔是咱們真正須要去思考的。

那麼先到這，關於組件之間通訊的問題，留到之後慢慢了解。

路由嵌套

仍是剛剛的代碼與目錄結構，咱們已經實現了組件之間的嵌套，可是有時並不但願組件直接就加載進來，而是在用戶點擊後才展示在頁面中，這是就須要使用到路由嵌套。

爲了偷懶，這裏就直接使用hello.vue。實現嵌套路由主要有如下幾步：

第一步：制定嵌套路由規則：

看main.js下面這部分的代碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
{
 path: '/index',
 component: Index,
 // 在/index下設置一個子路由
 children: [
 // 當匹配到/index/hello時，會在index的<router-view>內渲染
 {
 path: 'hello',
 name:'hello',//無關緊要，主要是爲了方便使用
 // 一個hello組件
 component: Hello
 }
 ]
}

第二步：在組件中添加<router-view>

來自官網的解釋：<router-view> 用於渲染匹配的組件，它基於Vue的動態組件系統，因此它繼承了一個正常動態組件的不少特性。

將<router-view>寫在app.vue的<template></template>標籤中。

第三步：寫入跳轉路徑

仍是在index.vue中：

1
2
3
 
<router-link :to="{ path: '/index' }">回去主頁</router-link>
<!-- 點擊這兩個標籤就會實現頁面內的切換效果 -->
<router-link :to="{ path: '/index/hello' }">嵌套的路由</router-link>

 

，切換到瀏覽器，點擊該嵌套的路由便可讓hello.vue中的展示出來，在這裏直接使用了router-link來實現跳轉 ，固然$router.push同理。（注意在點擊兩個不一樣的文字時，地址欄的變化，以及展示內容的切換）

注意：

記錄 vue-webapck 的學習基礎，代碼示例 github地址

 

這個教程更多的是從基礎開始學習，vue 與 webpack 應該要怎麼結合。在真實的實際項目中，仍是推薦 vue-cli。

關於 vue-cli 生成的配置解析能夠參考一下 vue-cli#2.0 webpack 配置分析

在個人源碼中是在<style scoped></style>標籤中定義樣式的，請注意scoped的使用，它表示在該style中定義的樣式只會在當前的組件中起到效果，而不會去影響全局的css樣式。

最簡單的理解應該就是：

未寫該scoped屬性的全部組件中的樣式，在通過vue-loader編譯以後擁有全局做用域。至關於共用一份css樣式表。

而寫了該屬性的的組件中定義的樣式，擁有獨立做用域。至關於除去引入了公用的一份css樣式表外，但單獨擁有一份css的樣式表。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程