Vue路由

時間 2019-11-12

標籤 vue 路由欄目系統網絡简体版

原文原文鏈接

Vue路由

什麼是Vue路由？javascript

**後端路由：**即請求的URL地址都對應後端的接口，請求URL響應對應的服務器的資源。html
**前段路由：**對於單頁面程序來講，主要經過URL中的hash(#號)來實現不一樣頁面之間的切換，同時，hash有一個特色：HTTP請求中不會包含hash相關的內容；因此單頁面程序中的頁面跳轉主要經過hash實現。vue

java

入門

導入類庫

首先須要導入vue-router組件類庫：git

<script type="text/javascript" src="../lib/vue-router.js"></script>>

當導入類庫後，window全局對象中就存在了一個路由的構造函數： VueRouter；就像導入Vue類庫後存在一個Vue的構造函數同樣，咱們可以經過new VueRouter的方式實例化路由對象。github

若是你使用了new VueRouter({});構造函數來實例化了一個路由對象，你會發現瀏覽器路徑中會出現#/路徑，這個路徑就是前面講到的URL中的hash，他並不會向後端發送任何請求，而僅僅是做頁面跳轉，若是你#/後拼接了一個不存在的路徑，天然也不會進行跳轉，頁面也不會發送任何請求。正則表達式

實例：vue-router

基本使用

上面咱們講到了使用new VueRouter({})的方式實例化一個路由對象，其中包含幾個參數：後端

<!-- HTML -->
<div id="app">
	
	<!-- 給路由對象建立一個容器，包裹在父組件`app`內
		至關於一個佔位符，路由規則匹配到的組件內容就會展現到`<router-view></router-view>`中
	-->
	<router-view></router-view>
</div>

<!-- =================分割線===================== -->

<!-- JavaScript -->
//建立login組件
var login = {
	template: 'login組件'
}

//建立register組件
var register = {
	template: 'register組件'
}

// Router實例
var 路由對象名稱 = new VueRouter({
	routes: [
		{ path: '/監聽URL路徑', component: login(組件名稱) },
		{ path: '/監聽URL路徑', component: register(組件名稱) }
	]
});

// Vue實例
var vm = new Vue({
	el: 'app',
	data: {},
	methods: {},
	router: 路由對象名稱   
});

解釋：api

一、routes 表示這個路由對象中的 路由匹配規則，能夠存在多個規則（**注意：**這裏是routes而不是routers）
二、屬性一：path 表示監聽哪一個路由鏈接地址，即你想跳轉都哪一個路徑上，應在這裏註冊實現跳轉到對應的組件上
三、屬性二：component 表示若是路由匹配了前面的path，則展現component屬性對應的那個組件
四、component的屬性值必須是一個組件的模板對象，不能是組件的引用名稱
五、通過1-4的步驟基本完成了路由對象的建立，下面要將這個路由對象注入到Vue實例中，使用router: 組件對象名稱實現
六、建立對應須要監聽的組件，如上咱們建立了login和register組件，與以前講的不一樣是這裏是一個var 組件名稱其值是一個組件對象，和以前的Vue.component方式類似，可是這裏僅僅是一個組件對象，並無註冊到Vue實例中，由於沒有組件名稱，因此不能在HTML中使用<login></login> ，注意這裏的login是組件對象的名稱。

步驟：

一、建立router實例new VueRouter，完成相關屬性的定義；
二、將這個路由對象註冊到Vue實例中，使用router: 路由對象名稱的方式；
三、建立第一步中定義的組件名稱對應的組件，直接在<script>中定義var組件對象名稱便可，在template中定義具體的HTML視圖，或是經過template: '#id'引用外部視圖也行。
四、在Vue實例控制域app中，建立<router-view></router-view>，至關於router容器，你想在頁面上展現幾個組件就應該在頁面中建立幾個容器。

如上，咱們能夠寫具體的跳轉連接了：

<div id="app>
	<a href="#/login">登陸</a>
	<a href="#/register">註冊</a>
</div>

如上，當咱們點擊登陸或註冊，Vue-router就會監聽都對應的URL地址，而後在path規則中恰好匹配到規則login，那麼就會跳轉到對應的組件component: login的login組件中。可能你會疑惑了，爲何這裏的href須要寫爲#/login而不是/login或login，你嘗試一下就知道了，由於vue-router監聽URL地址是基於hash的，不加#/就會找不到路徑。

若是你以爲每次都加#/麻煩的話，Vue-router頁提供了一個Tag:<router-link to="URL地址"></router-link>，其在瀏覽器中會被解析爲<a>標籤。

實例

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <title></title>
</head>
<body>
	<div id="app">
		<h1>父組件</h1>

		<a href="#/login">登陸</a>
		<router-link to="register">註冊</router-link>

		<router-view></router-view>
	</div>
    <script type="text/javascript" src="../lib/vue.js"></script>
    <script type="text/javascript" src="../lib/vue-router.js"></script>
    <script type="text/javascript">

    	var login = {
    		template: '<h2>登陸組件</h2>'
    	}

    	var register = {
    		template: '<h2>註冊組件</h2>'
    	}

		var routerObj = new VueRouter({
			routes: [
				{ path: '/login', component: login },
				{ path: '/register', component: register }
			]
		});

		var vm = new Vue({
			el: '#app',
			data: {},
			methods: {},
			router: routerObj
		});
    </script>
</body>
</html>

可是上面的實例中，咱們發現默認進入的根路徑中僅有一個父組件名稱，通常咱們的登陸頁面應該直接顯示登陸框，因此vue-router提供了重定向的動能{path: '', redirect: ''}，即在router: []中監聽根路徑，若是監聽都訪問的是根路徑就重定向到登陸URL就行了。

var routerObj = new VueRouter({
	routes: [
		{ path: '/', redirect: '/login' },
		{ path: '/login', component: login },
		{ path: '/register', component: register }
	]
});

路由參數傳遞

在進行頁面跳轉，即路由的時候，咱們可能須要在發送URL時傳遞一些參數，常見的就如http://tycoding.cn/api?id=1&name='塗陌'這種格式。

那麼在URL中傳遞的參數，vue-router提供了一種獲取方式：this.$route。

那麼何時能獲取到傳遞的參數呢？回顧前面講到的Vue聲明周期函數，那麼在自定義組件中天然也存在生命週期函數，因此最先操做組件data和methods中數據的階段就是created這個聲明周期函數的階段。

實例：

上面打印的值中，咱們能看到，咱們再VueRouter中建立的path匹配規則，實際在HTML中會被渲染爲相關的正則表達式，來實現路徑的匹配。其次，咱們還能發現，在URL中拼接的參數id在this.$route對象的query屬性中，咱們經過this.$route.query.id便可得到傳遞的id值：2。

路由嵌套

路由嵌套，顧名思義即在父級路由內部存在子路由。例如：

根路徑：http://tycoding.cn/ 父級路由地址：http://tycoding.cn/api 子級路由地址：http://tycoding.cn/api/login

實例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <title></title>
</head>
<body>
	<div id="app">
		<router-link to="/account">Account</router-link>

		<router-view></router-view>
	</div>

	<template id="tmp">
		<div>
			<h1>這是Account組件</h1>

			<router-link to="/account/login">登陸</router-link>
			<router-link to="/account/register">註冊</router-link>

			<router-view></router-view>
		</div>
	</template>
    <script type="text/javascript" src="../lib/vue.js"></script>
    <script type="text/javascript" src="../lib/vue-router.js"></script>
    <script type="text/javascript">

    	var account = {
    		template: '#tmp'
    	}

    	var login = {
    		template: '<h2>登陸組件</h2>',
    	}

    	var register = {
    		template: '<h2>註冊組件</h2>'
    	}

		var routerObj = new VueRouter({
			routes: [
				{ 
					path: '/account', 
					component: account,
					children: [
						{ path: 'login', component: login },
						{ path: 'register', component: register }
					]
			    },
			]
		});

		var vm = new Vue({
			el: '#app',
			data: {},
			methods: {},
			router: routerObj
		});
    </script>
</body>
</html>

如上，咱們使用了routes: []中的另一個屬性：children，顧名思義就是表示這個父規則/account下存在一些子規則，且在URL中應該體現出來：

注意：

在children中定義的子組件的path規則不能加/，即如上的，直接寫path: login便可，這樣請求account/login地址時，vue-router會找/account規則下的login規則，且不加/vue-router纔會自動將login視爲account下的子路徑，並自動拼接account/，不然不會自動拼接，那麼也沒法完成路由的嵌套。

命名視圖

咱們常見的後臺開發頁面，常常遇到上、左、中的佈局方式；那麼之前咱們可能使用iframe實現頁面間的跳轉，可是如今咱們學習的路由要比其更加的方便好用。

命名視圖的思想就是爲每個頁面展現的視圖都起一個名字，目的是爲了爲每一個<router-view></router-view>容器恰好匹配一個指定的視圖。使用方式：

<router-view></router-view>
<router-view name="left"></router-view>
<router-view name="main"></router-view>

routes: [
	{ 
		path: '/', components: {
			'default': header
			'left': left
			'main': main
		}
	}
]

解釋：

其中的path是根路徑/，而使用components代替以前的component，目的就是可匹配其下的多個規則；default表示默認的視圖組件是header這個組件，即會匹配到第一個<router-view>視圖容器中；下面的兩個組件會根據name名稱須要對應的組件。

實現上、左、中的佈局：

思路：

一、咱們須要建立三個組件，名稱分別爲：header、left、main；而且在app中建立三個<router-view></router-view>路由容器。

二、採用命名視圖的方式爲每一個視圖都起一個名字：<router-view name="left"></router-view> ...

三、註冊路由實例。

實例：

<br/>