vue 路由基礎

vue 路由基礎

vue 使用 vue-router 插件處理路由，路由是開發單頁應用必須掌握的知識。

什麼是 vue-router？

（1）vue-router 是 Vue 官方提供前端路由插件，藉助它咱們實現能夠基於路由和組件的單頁面應用。

（2）它與傳統的頁面區別在於：

• 傳統的頁面應用採用的是後端路由，即經過超連接來實現頁面切換和跳轉的。
• 而在 vue-router 單頁面應用中，則是經過路徑之間的切換（實際上就是組件的切換）。

router-link 和 router-view 組件

router-link 是一個a（連接）標籤的封裝，router-view 是路由視圖，渲染 router-link 匹配到的組件，可配合使用<transition> 和 <keep-alive> 使用。

更多詳細信息

路由配置

動態路由

$route 是當前路由，可用watch在組件中監它的變化，有一個 params 屬性，值一個包含動態路由的對象。

watch: {
  '$route'(to) {
	 console.log(to);
	 //將路由的 params 屬性賦值給組件的 data 屬性
	 to.params && to.params.view && (this.effect = to.params.view)
	},
}
複製代碼

route 和 router 的區別

路由對象爲：

{
	path:'/argu/:name',
    // 使用 import 動態引入路徑對應的組件，起到懶加載的做用
    component:()=>import('@/views/ArguPage')
}
複製代碼

可在該路由的組件中這樣獲取name的值：

$route.params.name //給同一個組件設置傳遞不一樣的params，實現組件的複用
複製代碼

嵌套路由

在路由對象中添加一個 children 屬性，值是一個數組，可包含多個子路由。子路由 path 前面不能有 / 。 父級路由對應的組件必須有路由出口，即 router-view。

命名路由

路由對象中的 name 屬性是路由的名字，可用該名字指定路徑。 在 router-link 的 to 屬性動態綁定 路由對象。

<router-link :to="{name:'home'}"></router-link>
複製代碼

命名視圖

route-view 是路由視圖，只有一個視圖時，路由匹配的組件在該視圖中渲染，多個視圖則要對視圖進行命名。

<!-- 視圖渲染組件,該組件內不須要房子任何內容，可寫成只閉合標籤-->
<router-view />
<!-- 有多個路由視圖須要匹配，則用命名視圖 -->
<router-view name="sister"></router-view>
<router-view name="brother"></router-view>
複製代碼

路由對象：

{
	path:'/name/view',
	name:'name_view',
	// 注意命名視圖的 components 和 組件的 component 的區別
	components:{
		// 不給 router-view 設置 name 屬性，name 值就是 default
		default:()=>import('@/views/ChildPage'),
		sister:()=>import('@/views/SisterPage'),
		brother:()=>import('@/views/BrotherPage'),
	}
}
複製代碼

JS 操做路由

路由對象 $router 有多個函數push、go、replace

push 可導航到不一樣的頁面，會將該路徑進入歷史記錄。 $router.push 和 window.history.pushSate 同樣。 push 可接受不一樣的參數：

//字符串路徑
this.$router.push('home')

// 路由對象
this.$router.push({path:'home'})

// 命名路由加參數
this.$router.push({name:'argu',params:{name:'jack'}})
// path 路由和 query
this.$router.push({path:'argu',query:{name:'jack'}});
// path 和 params 不可一塊兒使用，params 會被忽略
this.$router.push({path:'argu',params:{name:'jack'}});
this.$router.push({name:'argu',query:{name:'jack'}});

複製代碼

go 的參數是一個整數，表示回退或者前進多少歷史記錄。

// 在瀏覽器記錄中前進一步，等同於 history.forward()
$router.go(1)

// 後退一步記錄，等同於 history.back()
$router.go(-1)

// 前進 3 步記錄
$router.go(3)

// 若是 history 記錄不夠用，那就默默地失敗唄
$router.go(-100)
$router.go(100)
複製代碼

router.replace(location) = window.history.replaceState 跟 router.push 很像，惟一的不一樣就是，它不會向 history 添加新記錄，而是跟它的方法名同樣 —— 替換掉當前的 history 記錄

使用場景：不須要用戶回退的狀況，好比權限驗證。

// 路由名字
this.$router.replace('name_view');
// 字符串路徑
this.$router.replace('/name/view');
// 路由對象
this.$router.replace({path:'/name/view'});
// 命名路由帶 params 
this.$router.replace({name:'name_view',params:{age:24}});
// path 和 query
this.$router.replace({path:'name_view',query:{age:24}});
// this.$router.replace({path:'/name/view',params:{age:24}});
複製代碼

重定向和別名

// 路由重定向:訪問 /index ，重定向到 /
{
	path:'/index',
	redirect:'/'
}
複製代碼

redirect 也可設置一個對象：

{
	path:'/index',
	redirect:{
		name:'home'
	}
}
複製代碼

redirect 還能夠設置爲一個函數，傳遞一個參數 to,可根據該對象的不一樣值，重定向到不一樣的頁面，返回一個 命名路由 或者 字符串路徑 。

{
	path:'/index',
	redirect:to=>{
		// do something with to 
		return {
			name:'home'
		}
	}
}
複製代碼

to 是一個包含路徑參數的對象：

{
	name: "index",
	meta: {},// 路由元數據，可在全局導航守衛中獲取該對象，而後不一樣頁面設置不一樣的值，好比設置頁面的標題
	path: "/index", // 路由路徑 解析爲絕對路徑 /a/b
	hash: "", // 書籤
	query: {}, // 查詢參數 /a?user=jack, $route.query.uer 的值爲 jack
	params: {}, //
	fullPath: "/index", // 完整路徑
	matched: [{ // 當前路由的全部嵌套路徑片斷的路由記錄,路由記錄就是路由的副本。
		path: "/index",
		regex: {
			keys: []
		},
		components: {},
		instances: {},
		name: "index",
		meta: {},
		props: {}
	}],
    redirectedForm:''// 重定向來源的名字
}
複製代碼

router.beforeEach((to, from, next) => {
	console.log('①，全局前置守衛,beforeEach');
    //給每一個頁面設置不一樣的標題，標題就從 meta 中獲取
    //setTitle = (title)=>{
	// window.document.title=title||'admin'
	//}
	to.meta && setTitle(to.meta.title);
	next(()=>{
		console.log('②，全局前置守衛,beforeEach');
	});
});
複製代碼

路徑別名

{
	name: 'home',
	alias:'home_page',// 路徑別名
	path: '/',
	component: Home
}
複製代碼