vue-router的基本框架及寫法，router-view與router-link

一.安裝和使用vue-router

步驟一：安裝vue-router:npm install vue-router --save
步驟二：在模組化工程中使用它

如果使用Vuecli腳手架，在配置時選擇安裝，則我們可以在src資料夾中找到router資料夾，並且其中會包含index.js檔案，在這個js檔案中，我們將配置所有的路由相關的資訊

1.搭建路由框架

• 第一步：匯入路由物件，並且呼叫Vue.use(VueRouter)
• 第二步：建立路由例項，並且傳入路由對映配置
• 第三步：在Vue例項中掛載建立的路由例項

首先在router資料夾下的index.js中配置路由相關的資訊
 import VueRouter from 'vue-router'
 import Vue from 'vue'

// 1.通過vue.use(外掛)，安裝外掛
Vue.use（VueRouter）

// 2.建立VueRouter物件
const routes = [

]
const router = new VueRouter({
	// 配置路由和元件之間的對映關係
	routes  // ES6的增強寫法
})

// 3.將router物件傳到Vue例項中
export default router

接下來在main.js的Vue例項中將路由例項掛載
new Vue({
	el:'#app',
	router, // ES6的增強寫法，相當於router:router
	render:h=>h(App)
})

2.配置路由和元件之間的對映關係

一個對映關係就是一個物件

• 第一步：建立路由元件，因為一個地址對應一個路由元件，所以必須要先建立路由元件
• 第二步：配置路由對映：元件和路徑對映關係
• 第三步：使用路由：通過<router-link>和<router-view>,
• router-link可以生成一個可以點選的文字，最終會預設渲染成a標籤，與to一起使用
• 而router-view相當於一個佔位的作用，決定跳轉後的內容顯示在link的上方或下方

首先在components資料夾中建立.vue檔案，即路由元件,建立完成後，需要在router資料夾下的index.js中匯入
//index.js檔案
import Home from '../components/Home'  // 這裡注意當前是index.js檔案，所以去到components資料夾要用../
import About from '../components/About'

const routes = [
	//路由和元件之間的對映關係，一個對映關係就是一個物件
	{
		path:'/home',
		component:'Home'
	},
	{
	path:'/about',
	component:'About'
	}
]

接下來因為main.js檔案中掛載的是APP元件，所以需要在App.vue檔案上新增link才能在html上顯示
//App.vue檔案
<template>
	<div>
		<router-view></router-view> // 佔位作用
		<router-link to='/home'>首頁</router-link> // to後面跟上路徑
		<router-link to='/about'>關於</router-link>
	</div>
</template>

圖示：

3.路由的預設路徑

通常情況下，在進入網站首頁的時候，我們希望<router-view></router-view>直接渲染首頁的內容，而不是通過點選router-link再進行跳轉，那麼如何讓路徑預設跳到首頁呢

只需多配置一個對映即可
const routes=[
	{
	path:'',
	redirect:'/home' // 重定向，即最初路徑為根路徑時，立即重定向到/home路徑
	}
]

4.通過html5的history修改路徑模式

預設情況下，我們修改了路徑後，在上方位址列中路徑會包含#號，即hash模式

那麼如何更換hash模式，變為平時看到的路徑呢?

在路由例項中更改mode即可
const router = new VueRouter({
	routes,
	mode:'history'  // 將hash模式更改為history模式
})

5.router-link的補充屬性

在前面的router-link中，我們只是使用了一個屬性：to，用於指定跳轉的路徑
它還有其他的屬性：

• tag: tag可以指定router-link之後被渲染成什麼元件，router-link預設會被渲染成a標籤。<router-link to='/home' tag='button'> 表示會渲染成一個button元素，而不是a標籤
• replace: replace不會留下歷史記錄，所以指定replace的情況下，後退鍵返回不能返回到上一個頁面中，即預設情況下使用的是pushState
• active-class: 當router-link對應的路由匹配成功時，會自動給當前元素設定一個router-link-active的class，設定active-class可以修改預設的名稱，但通常情況會直接使用預設的router-link-active而不進行修改

//App.vue
<router-link to='/home' tag='button' replace active-class='active'>首頁</router-link>

6.路由跳轉程式碼

有的時候，頁面跳轉可能需要執行對應的JS程式碼，這個時候，就可以使用JS程式碼實現上述router-link跳轉

//App.vue
<template>
	<div>
		<button @click='linkToHome'>首頁</button> 
		<button @click='linkToAbout'>關於</button>
		<router-view></router-view> // 佔位作用
	</div>
</template>

<script>
export default {
	name:'App',
	methods:{
		linkToHome() {
			this.$router.push('/home')
		},
		linkToAbout() {
			this.$router.push('/about')
		}
	}
}
</script>