前端面試之vue實踐

由於Vue在開發時對路由支援的不足，後來官方補充了vue-router外掛，它在Vue的生態環境中非常重要，在實際開發中只要編寫一個頁面就會操作vue-router。要學習vue-router就要先知道這裡的路由是什麼？這裡的路由並不是指我們平時所說的硬體路由器，這裡的路由就是SPA（單頁應用）的路徑管理器。再通俗的說，vue-router就是我們WebApp的連結路徑管理系統。

著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

解讀router/index.js檔案

我們用vue-cli生產了我們的專案結構，你可以在src/router/index.js檔案，這個檔案就是路由的核心檔案，我們先解讀一下它。

import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import Hello from '@/components/Hello' //引入根目錄下的Hello.vue元件
 
Vue.use(Router) //Vue全域性使用Router
 
export default new Router({
 routes: [ //配置路由，這裡是個陣列
 { //每一個連結都是一個物件
 path: '/', //連結路徑
 name: 'Hello', //路由名稱，
 component: Hello //對應的元件模板
 }
 ]
})
複製程式碼

增加一個Hi的路由和頁面

對路由的核心檔案熟悉後，我們試著增加一個路由配置，我們希望在位址列輸入 http://localhost:8080/#/hi 的時候出現一個新的頁面，先來看一下我們希望得到的效果。

具體操作步驟如下：

在src/components目錄下，新建 Hi.vue 檔案。

編寫檔案內容，和我們之前講過的一樣，檔案要包括三個部分<template><script>和<style>。檔案很簡單，只是列印一句話。

<template>
 <div class="hello">
 <h1>{{ msg }}</h1>
 </div>
</template>
 
<script>
export default {
 name: 'hi',
 data () {
 return {
 msg: 'Hi, I am JSPang'
 }
 }
}
</script>
 
 
<style scoped>
 
</style>
複製程式碼

引入 Hi元件：我們在router/index.js檔案的上邊引入Hi元件 import Hi from '@/components/Hi'

增加路由配置：在router/index.js檔案的routes[]陣列中，新增加一個物件，程式碼如下。

{
 path:'/hi',
 name:'Hi',
 component:Hi
}
複製程式碼

router-link製作導航

現在通過在位址列改變字串地址，已經可以實現頁面內容的變化了。這並不滿足需求，我們需要的是在頁面上有個像樣的導航連結，我們只要點選就可以實現頁面內容的變化。製作連結需要<router-link>標籤，我們先來看一下它的語法。 <router-link to="/">[顯示欄位]</router-link>

子路由

改造App.vue的導航程式碼

App.vue程式碼，注意<route-view>的用法。

<template>
 <div id="app">
 <img src="./assets/logo.png">
 <p>導航 ：
 <router-link to="/">首頁</router-link> | 
 <router-link to="/hi">Hi頁面</router-link> |
 <router-link to="/hi/hi1">-Hi頁面1</router-link> |
 <router-link to="/hi/hi2">-Hi頁面2</router-link>
 <router-link to="/hi1">Hi頁面</router-link> 
 </p>
 <router-view/>
 </div>
</template>
<script>
export default {
 name: "App"
};
</script>
<style>
#app {
 font-family: "Avenir", Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

複製程式碼

改寫components/Hi.vue頁面

把Hi.vue改成一個通用的模板，加入標籤，給子模板提供插入位置。“Hi頁面1” 和 “Hi頁面2” 都相當於“Hi頁面”的子頁面，有點想繼承關係。我們在“Hi頁面”里加入標籤。

Hi1.vue

<template>
 <div class="hello">
 <h1>{{ msg }}</h1>
 </div>
</template>
<script>
export default {
 name: 'hi',
 data () {
 return {
 msg: 'Hi, I am Hi1!'
 }
 }
}
</script>
<style scoped>
 
</style>
複製程式碼

Hi2.vue

<template>
 <div class="hello">
 <h1>{{ msg }}</h1>
 </div>
</template>
<script>
export default {
 name: 'hi',
 data () {
 return {
 msg: 'Hi, I am Hi2'
 }
 }
}
</script>
<style scoped>
</style>
複製程式碼

Hi.vue程式碼

注意新增的router-view

<template>
 <div class="hello">
 <h1>{{ msg }}</h1>
 <router-view class="aaa"></router-view>
 </div>
 
</template>
 
<script>
export default {
 name: 'hi',
 data () {
 return {
 msg: 'Hi, I am JSPang'
 }
 }
}
</script>
 
 
<style scoped>
 
</style>複製程式碼