[Vue.js] vue-router2

建立時間: 2016-10-22 12:16:45
更新時間: 2016-10-22 12:16:45

前言

vue-router官方已經有簡體中文的文件

但其實我在用vue大型專案的時候會一些習慣

例如把router從main.js中獨立出一個js來

或是router更變時使用transition等等

所以還是決定自己寫一篇筆記

另外因為vue-router2改的東西很多

所以要注意一下這篇範例使用的是vue-router2

至於使用vue-cli建立專案可以參考我的另一篇文章

 

安裝vue-router

安裝vue-router並將相依性寫入package.json

 npm install vue-router --save-dev

 

在main.js中載入vue-router

 const VueRouter = require('vue-router')
 Vue.use(VueRouter)

 

建立router要使用的vue元件

通常在大型專案中

網站只會有一部分使用router做切換

所以我們先建立一些router切換要用vue元件(也可以說成頁面)

元件就一樣放在/src/components中

 

home.vue

 <template>
 	<h1>
 		Home Page
 	</h1>
 </template>

 

user.vue

 <template>
 	<h1>
 		Hi, User!
 	</h1>
 </template>

 

設定router

建立好元件之後

我們開始要設定router

 

因為大型專案的route規則會很多

我習慣將router設定從main.js中抽到另一個router.js中

所以我們自與main.js同一目錄中建立router.js

並在裡面設定router的規則

 

要注意的是

在webpack.base.conf.js中require的預設路徑是node_modules

所以在這邊require元件的時候要使用./

 

以下是router.js的設定

path: router位址

name: router命名

redirect: 轉址, 它可以使用path或是name來轉址

components: 指向的vue元件

 module.exports = function() {
 	return [
 		{
 			path: '/',
 			name: 'route-root',
 			redirect: { name: 'home' }
 		},
 		{
 			path: '/home',
 			name: 'home',
 			component: require('./components/home.vue')
 		},
 		{
 			path: '/user',
 			name: 'user',
 			component: require('./components/user.vue')
 		}
 	];
 }

 

載入router.js

回到main.js中

我們要建立router並載入router.js中的設定

如果建立好連結後在網址列輸入localhost:8080

我們看到的連結將會是localhost:8080/#/home

這是vue預設的選項

 const routerConfig = require('./router.js');
 
 const router = new VueRouter({
 	routes: routerConfig().concat(require('./router.js')())
 });

 

此外也要將router放入Vue中

 new Vue({
 	el: '#app',
 	template: '<App/>',
 	router,
 	components: {
 		App
 	}
 })

 

如果想拿掉#也是可以

我們可以改用html history模式

除了要在這邊設定router之外

也要設定.htaccess在專案根目錄中

否則用戶端造訪網站將會出現404的回應

 

首先加上mode: 'history'

 const routerConfig = require('./router.js');
 
 const router = new VueRouter({
 	mode: 'history',
 	routes: routerConfig().concat(routerConfig())
 });

 

在專案目錄中加入.htaceess

 RewriteEngine On
 RewriteBase /
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.html [L]

 

要注意的是

我們在專案完成執行npm run build打包後

我們要在dist目錄中加入這個.htaccess

如果忘記了會向上面提到的

網站會回應404

 

設定router-view

router設定完後

我們還需要使用<router-view></router-view>將router結果render出來

依照慣例App.vue會是專案的根元件

所以我們將<router-view></router-view>放在App.vue要render的位置中

 <template>
 	<div id="app">
 		<router-view></router-view>
 	</div>
 </template>

 

設定連結

設定好router規則

我們還缺一個連結將我們導到做好的頁面

所以我們還要在App.vue中使用<router-link>建立連結

 

這邊可以看到我們使用:to屬性指定導向的連結

並可以使用params傳送參數

後面會講到如何取得router參數

 

另外vue有一個很方便的地方

使用router-link會自動對應目前的router

將對應到的連結加上router-link-active的class

方便我們設定active的style

 <template>
 	<div id="app">
 		<router-link :to="{ name: 'home' }">
 			Home Page
 		</router-link>
 		<router-link :to="{ name: 'user', params: {id: 123} }">
 			User
 		</router-link>
 
 		<router-view></router-view>
 	</div>
 </template>
 
 <style lang="sass">
 	#app
 		text-align: center
 		color: #2c3e50
 		margin-top: 60px
 
 	a
 		margin: 30px
 	
 	.router-link-active
 		color: red
 </style>

 

注意

在vue1.x中連結使用的是v-link屬性

而vue2已經把v-link拿掉了

 

到這邊為止

我們已經設定好一個能用的router了

在瀏覽器輸入localhost:8080後

router會依照我們的設定

自動在/的時候轉到/home

並且可以看到router-link自動將連結加上router-link-active的class

 

點選User連結就可以看到vue元件隨著router更換

並且在User連結加上router-link-active的class

 

取得router變數

我們常常需要在網站上取得router參數來做一些事情

前面我們有在User的連結中加入id這個參數

現在我們要在user.vue中取得這個參數

我們只要使用$router.params.id就能取得id這個參數

 <template>
 	<h1>
 		Hi, User{{ $route.params.id }}!
 	</h1>
 </template>

 

加上transition使用轉場特效

再切換頁面的時候

如果加入一切特效

會讓網站看起來更舒服

這邊我是參考vue官方文件的transition部分

 

因為router-view是在App.vue中

所以我們

一樣要回到App.vue中設定

在router-view外面加一層transition

並且加上name="transition"屬性

 <transition name="effect">
 	<router-view></router-view>
 </transition>

 

name屬性可以自訂

它的作用主要在於在轉場的不同時間點中

vue會自動依照你的命名(例如目前命名為transition)

加上.transition-enter-active, transition-leavce-active, .transition-enter等class屬性

讓我們可以取得轉場中的每個時間點

設定每個時間點的style

 

這邊我是使用淡出以及移動來做轉場

一樣在App.vue中設定轉場中幾個時間點的style

就能很簡單的達到很好的效果

 <style lang="sass?indentedSyntax" type="text/sass">
 	.effect-enter-active
 		transition: all 1s ease
 
 	.effect-enter
 		opacity: 0
 		padding-left: 30px
 
 </style>