GSO (vue07)

Vue-rounter

前臺路由，通過地址決定如何顯示頁面

基本使用方法

創建一個路由對象,new路由對象的時候,可以傳遞一個對象

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

• route表示路由匹配規則
• 每個路由規則都是一個對象,這個規則對象有兩個必須的屬性

1.path:表示監聽那個路由鏈接地址

2.component:表示如果路由是前面提到的path,則展示component對應組件模板（只是模板，不能放組件名稱）

簡單的路由演示
寫兩個簡單模板

var login = {
			template:"<h3>登錄</h3>"
		}
var register = {
			template:"<h3>註冊</h3>"
		}

創建路由對象

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

插入router-view標籤（vue-router提供的元素，路由規則匹配到的組件會展示到router-view中去）

  <router-view></router-view>

此時在頁面地址後加#/login可顯示登錄模板（可通過a標籤改變地址）

<a href="#/login">登錄</a>

推薦直接使用router-link標籤

<router-link  to="/login"> 登錄</router-link>

效果相同，且不用加“#”（會被默認渲染爲a標籤,可用tag屬性自定義渲染爲何種標籤）

重定向

{path:'/',redirect:'/login'}

用以默認打開登錄組件

路由高亮

被點擊的 router-link 元素會獲得router-link-exact-active和router-link-active兩個類，可給兩個類添加樣式。
獲得的類可以自己修改

  var routerObj = new VueRouter({
    			routes:[
    				{path:'/login',component:login},
    				{path:'/register',component:register}
    			]，
    			linkActiveClass:'myactive'
    		})
創建對象時linkActiveClass屬性可修改router-link 元素被點擊時獲得的類名

路由傳參數

query方法
在地址後用get方法添加數據

<router-link  to="/login?id=你好"> 登錄</router-link>

在要渲染的模板中用this.$route.query接收（this可省略）

var login = {
			template:"<h3>登錄{{$route.query.id}}</h3>",
			created(){//組件的生命週期鉤子函數
				console.log(this.$route.query.id)
			}}

此方法路有規則中的path不變，仍爲
{path:’/login’,component:login}
params方法
根據要的參數修改路由規則對象中的path

{path:'/login/:id',component:login}

此時地址添加數據方法爲

<router-link  to="/login/鳥">

最後在要渲染的模板中用this.$route.params接收（this可省略）

 template:"<h3>登錄{{$route.params.id}}</h3>"

此方法若訪問地址中的數據與路由規則地址中的數據個數不一樣則會匹配不上路由。像**/login/鳥/**這樣後面只有斜槓將被視作只有一個參數“鳥”。

路由嵌套

路由嵌套據目前瞭解的大概作用就是讓父路由規則渲染的模板保持存在的情況下通過子路由選擇模板。
(視頻講解不全面,只能先學會怎麼寫）
例子
routes:[{path:’/account’,
component:{ template:"#tmp1"},
children:[ {path:‘login’,component:login},
{path:‘register’,component:register} ]
}]
tmp1爲父路由的模板，它包含了子路由的router-view標籤以及選擇訪問子路由地址的按鈕。

<template id="tmp1">
			<div >
			<h1>這是Account組件</h1>
				<router-link  to="/account/login"> 登錄</router-link>
				<router-link  to="/account/register"> 註冊</router-link>
			    <router-view></router-view>
			</div>
		</template>

這樣當tmp1組件出現時才能選擇子路由。
注意：
子路由的地址最好寫成’login’而非’/login’,前者會在父路由後面加上’login’,後者將會替換父路由.(且訪問前者的地址爲/account/login，訪問後者爲/login)
個人測試發現：不先訪問父路由直接訪問子路由，那麼父路由和子路由將會直接一起觸發。

命名視圖

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

想要三個標籤顯示不同的控件，路由規則這樣寫 （name屬性）

{path:"/",components:
				{default:header,
					left:leftBox,
					main:mainBox}
	}