目錄
保持熱愛，奔赴山海
路由
概念基知介紹
1、路由的本質就是一種對應關系，url地址和真實的資源之間就有一種對應的關系，就是路由。
2、路由分為前端路由與后端路由
3、Ajax前端渲染（前端渲染提高性能，但是不支持瀏覽器的前進后退操作）
4、SPA（ Single Page Application）單頁面應用程序：整個網站只有一個頁面，內容的變化通過Ajax局部更新實現、同時支持瀏覽器地址欄的前進和后退操作。
5、SPA實現原理之一：基於URL地址的hash（hash的變化會導致瀏覽器記錄訪問歷史的變化、但是hash的變化不會觸發新的URL請求，在實現SPA過程中，最核心的技術點就是前端路由。
前后端路由的區別
1).后端路由是由服務器端進行實現，並完成資源的分發。
2).前端路由是依靠hash值(錨鏈接)的變化進行實現 ，主要用於監聽事件並分發執行事件處理函數。
Vue Router
路由管理器
基本使用步驟
1.引入相關的庫文件
2.添加路由鏈接
3.添加路由填充位
4.定義路由組件
5.配置路由規則並創建路由實例
6.把路由掛載到vue根實例中
Tips: VSCode自定義快捷鍵生成Vue實例模板——附模板代碼
添加路由鏈接:<router-link>是路由中提供的標簽，默認會被渲染為a標簽，to屬性默認被渲染為href屬性，to屬性的值會被渲染為#開頭的hash地址
<script src="lib/vue_2.5.22.js"></script>
<script src="lib/vue-router_3.0.2.js"></script>
<router-link to="/user">User</router-link>
<router-link to="/login">Login</router-link>
//添加路由填充位（路由占位符）
<router-view></router-view>
//定義路由組件
var User = { template:"<div>This is User</div>" }
var Login = { template:"<div>This is Login</div>" }
//配置路由規則並創建路由實例
var myRouter = new VueRouter({
//routes是路由規則數組
routes:[
//每一個路由規則都是一個對象，對象中至少包含path和component兩個屬性
//path表示 路由匹配的hash地址，component表示路由規則對應要展示的組件對象
{path:"/user",component:User},
{path:"/login",component:Login}
]
})
//將路由掛載到Vue實例中
new Vue({
el:"#app",
//通過router屬性掛載路由對象(下為簡寫)
router:myRouter
})
路由重定向
可以通過路由重定向為頁面設置默認展示的組件
var myRouter = new VueRouter({
//routes是路由規則數組
routes: [
//path設置為/表示頁面最初始的地址 / ,redirect表示要被重定向的新地址，設置為一個路由即可
{ path:"/",redirect:"/user"}, // 核心
{ path: "/user", component: User },
{ path: "/login", component: Login }
]
})
路由嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<!-- 導入 vue 文件 -->
<script src="./lib/vue_2.5.22.js"></script>
<script src="./lib/vue-router_3.0.2.js"></script>
</head>
<body>
<!-- 被 vm 實例所控制的區域 -->
<div id="app">
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
<script>
const User = {
template: '<h1>User 組件</h1>'
}
const Register = {
template: `<div>
<h1>Register 組件</h1>
<hr/>
<!-- 子路由鏈接 -->
<router-link to="/register/tab1">tab1</router-link>
<router-link to="/register/tab2">tab2</router-link>
<!-- 子路由的占位符 -->
<router-view />
<div>`
}
const Tab1 = {
template: '<h3>tab1 子組件</h3>'
}
const Tab2 = {
template: '<h3>tab2 子組件</h3>'
}
// 創建路由實例對象
const router = new VueRouter({
// 所有的路由規則
routes: [
{ path: '/', redirect: '/user'},
{ path: '/user', component: User },
// children 數組表示子路由規則
{ path: '/register', component: Register, children: [
{ path: '/register/tab1', component: Tab1 },
{ path: '/register/tab2', component: Tab2 }
] }
]
})
// 創建 vm 實例對象
const vm = new Vue({
// 指定控制的區域
el: '#app',
data: {},
// 掛載路由實例對象
// router: router
router
})
</script>
</body>
</html>
頁面效果
動態路由匹配
通過動態路由參數的模式進行路由匹配
var myRouter = new VueRouter({
//routes是路由規則數組
routes: [
//通過/:參數名 的形式傳遞參數
{ path: "/user/:id", component: User },
]
})
var User = {
template:"<div>用戶：{{$route.params.id}}</div>"
}
路由組件傳遞參數
情況一
為解決使用$route.params.id來獲取路徑傳參的數據不夠靈活。
運用 props 數組傳參
情況二
靜態數組對象，將props設置為對象，直接將對象的數據傳遞給
組件進行使用
var User = {
props:["username","pwd"],
template:"<div>用戶：{{username}}---{{pwd}}</div>"
}
var myRouter = new VueRouter({
//routes是路由規則數組
routes: [
//通過/:參數名 的形式傳遞參數
//如果props設置為對象，則傳遞的是對象中的數據給組件
{ path: "/user/:id", component: User,props:{username:"jack",pwd:123} },
]
})
情況四
實現獲取傳遞的參數值和傳遞的對象數據，那么props應該設置為
函數形式。
var User = {
props:["username","pwd","id"],
template:"<div>用戶：{{id}} -> {{username}}---{{pwd}}</div>"
}
var myRouter = new VueRouter({
//routes是路由規則數組
routes: [
//通過/:參數名 的形式傳遞參數
//如果props設置為函數，則通過函數的第一個參數獲取路由對象
//並可以通過路由對象的params屬性獲取傳遞的參數
// 箭頭函數
{ path: "/user/:id", component: User,props:(route)=>{
return {username:"jack",pwd:123,id:route.params.id}
}
},
]
})
命名路由
編程式導航
頁面導航的兩種方式
- 聲明式導航：通過點擊鏈接實現導航的方式，叫做聲明式導航
例如：普通網頁中的<a></a>鏈接或Vue中的< router-link></ router-link> - 編程式導航：通過調用 JavaScript形式的API實現導航的方式，叫做編程式導航
例如：普通網頁中的location.href
@click="goRegister"為注冊點擊事件，后在 method 中體現