路由
路由的本質就是對應關係：
分爲前端路由、後端路由
後端路由
- 概念：根據不同的用戶 URL 請求，返回不同的內容
- 本質：URL 請求地址與服務器資源之間的對應關係
前端路由
通過SPA 實現單頁面內容更新、
SPA實現原理:基於URL地址的hash(hash的變化會導致瀏覽器記錄訪問歷史的變化、但是hash的變化不會觸發新的URL請求)
前端路由
- 概念：根據不同的用戶事件，顯示不同的頁面內容
- 本質：用戶事件與事件處理函數之間的對應關係
– 前端路由主要做的事情就是監聽事件並分發執行事件處理函數
–前端路由是依靠基於hash值(錨鏈接)的變化進行實現
![在這裏插入圖片描述]()
實現簡易前端路由
基於URL中的hash(錨鏈接)實現（點擊菜單的時候改變URL的hash，根據hash的變化控制組件的切換）
// 監聽 window 的 onhashchange 事件，根據獲取到的最新的 hash 值，切換要顯示的組件的名稱
window.onhashchange = function() {
// 通過 location.hash 獲取到最新的 hash 值
}
Vue Router
Vue Router描述
用於SPA應用開發
功能
支持HTML5、歷史模式、hash模式、支持嵌套路由、
支持路由參數、支持編程式路由、支持命名路由
vue-router的基本使用
基本使用
1. 引入相關的庫文件
2. 添加路由鏈接
3. 添加路由填充位
4. 定義路由組件
5. 創建路由實例並配置路由規則
6. 把路由掛載到 Vue 根實例中
<body>
<div id='app' v-cloak>
<!-- 2、添加路由鏈接 -->
<!-- router-link 是 vue 中提供的標籤，默認會被渲染爲 a 標籤 -->
<!-- to 屬性默認會被渲染爲 href 屬性 -->
<!-- to 屬性的值默認會被渲染爲 # 開頭的 hash 地址 -->
<router-link to="/user">user</router-link>
<router-link to="/register">Register</router-link>
<!-- 3、設置路由填充位 -->
<!-- 路由填充位（也叫做路由佔位符） -->
<!-- 將來通過路由規則匹配到的組件，將會被渲染到 router-view 所在的位置 -->
<router-view></router-view>
</div>
</body>
<!-- 1、導入路由庫文件 -->
<script src="js/vue.js"></script>
<script src="js/vue-router_3.0.2.js"></script>
<script>
// 4、定義路由組件
const User = {
template: '<h1>User 組件</h1>'
}
const Register = {
template: '<h1>register 組件</h1>'
}
// 5、創建路由實例對象與定義路由規則
const router = new VueRouter({
//定義路由規則
//routes指多個路由規則
//components只接收組件對象
routes: [
// 每個路由規則都是一個配置對象，其中至少包含 path 和 component 兩個屬性：
// path 表示當前路由規則匹配的 hash 地址
// component 表示當前路由規則對應要展示的組件
{ path: '/user', component: User },
{ path: '/register', component: Register }
]
})
var vm = new Vue({
//掛載元素
el: '#app',
//6、掛載路由實例對象、讓路由規則生效
router,
//數據模型
data: {
},
//方法
methods: {
},
created() {
},
//DOM掛載完畢
mounted() {
}
})
</script>
路由重定向
路由重定向：可以通過路由重定向爲頁面設置默認展示的組件
var router = new VueRouter({
routes: [
// 其中，path 表示需要被重定向的原地址，redirect 表示將要被重定向到的新地址
{path:'/', redirect: '/user'},
{path:'/user',component: User},
{path:'/register',component: Register}
]
})
嵌套路由
概念:當我們進行路由的時候顯示的組件中還有新的子級路由鏈接以及內容。
1、定義父級路由鏈接、創建填充位
2、在父級路由組件中定義子路由鏈接、子路由填充位
3、創建子路由組件
4、在父路由規則中通過children屬性定義子級路由規則
var User = { template: "<div>This is User</div>" }
//Login組件中的模板代碼裏面包含了子級路由鏈接以及子級路由的佔位符
var Login = { template: `<div>
<h1>This is Login</h1>
<hr>
<router-link to="/login/account">賬號密碼登錄</router-link>
<router-link to="/login/phone">掃碼登錄</router-link>
<!-- 子路由組件將會在router-view中顯示 -->
<router-view></router-view>
</div>` }
//定義兩個子級路由組件
var account = { template:"<div>賬號：<input><br>密碼：<input></div>"};
var phone = { template:"<h1>掃我二維碼</h1>"};
var myRouter = new VueRouter({
//routes是路由規則數組
routes: [
{ path:"/",redirect:"/user"},
{ path: "/user", component: User },
{
path: "/login",
component: Login,
//通過children屬性爲/login添加子路由規則
children:[
{ path: "/login/account", component: account },
{ path: "/login/phone", component: phone },
]
}
]
})
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router:myRouter
});
動態路由匹配
概念:把路由中那些變化的值形成路由參數、這些參數叫動態路由匹配
應用：通過動態路由參數的模式進行路由匹配
路由傳遞參數
$route.params用於接收動態路由的參數
//在路由組件中通過$route.params獲取路由參數
var User = { template:"<div>用戶：{{$route.params.id}}</div>"}
var myRouter = new VueRouter({
//routes是路由規則數組
routes: [
//通過/:參數名 的形式傳遞參數
{ path: "/user/:id", component: User },
]
})
路由組件傳遞參數(props值爲true)
在定義規則中通過props:true開啓路由傳參
在定義的組件中使用props接收路由參數
//在User組件中訪問匹配的路由參數
const User = {
// 在定義組件中使用props接收參數
props: ['id'],
template: '<h1>User 組件------用戶id爲: {{id}}</h1>'
}
// 創建路由實例對象與定義路由規則
const router = new VueRouter({
//routes指多個路由規則
routes: [
//props開啓動態路由傳遞參數
{ path: '/user/:id', component: User,props: true },
]
})
路由組件傳遞參數(props值爲對象)
傳遞了對象此時、對象中數據爲靜態數據、id值接收不到
在組件中通過props接收參數時、直接寫對象的鍵
//在User組件中訪問匹配的路由參數
const User = {
// 在定義組件中接收參數
//在組件中使用props接收參數時、通過對象中屬性名接收參數
props: ['id','uname','age'],
//使用參數
template: '<h1>User 組件------用戶id爲: {{id}}-----姓名爲:{{uname}}、今年{{age}}歲</h1>'
}
const router = new VueRouter({
routes: [
// 設置動態路由參數
//props開啓動態路由傳遞參數/對象類型
{ path: '/user/:id', component: User,props: {uname:'list',age:20} },
]
})
路由組件傳遞參數(props值爲函數)
既能接收對象(靜態)參數、又能接收路由(靜態)參數
//在User組件中訪問匹配的路由參數
const User = {
// 在定義組件中接收參數
props: ['id', 'uname', 'age'],
template: '<h1>User 組件------用戶id爲: {{id}}-----姓名爲:{{uname}}、今年{{age}}歲</h1>'
}
const router = new VueRouter({
routes: [
// 設置動態路由參數
//props開啓函數方式傳遞參數
//id通過rou動態匹配了路由參數
{ path: '/user/:id', component: User, props: route => ({ uname: 'zs', age: 20, id:route.params.id }) }
]
})
命名路由
命名路由：給路由規制對象起一個別名：及命名路由
//這兒通過命名路由實現頁面的跳轉、傳參
//:表示動態綁定、user表示指定頁面跳轉、params指命名路由參數
<router-link :to="{user:'user',params:{id:3}}">user3</router-link>
var myRouter = new VueRouter({
//routes是路由規則數組
routes: [
//通過name屬性爲路由添加一個別名
{ path: "/user/:id", component: User, name:"user"},
]
})
編程式導航
聲明式導航:通過點擊鏈接的方式實現的導航
編程式導航:調用js的api方法實現導航
聲明式導航:
<router-link to="/user/2">user2</router-link>
編程式導航：
methods: {
goReg() {
//在方法中通過調用push方法跳轉到指定路由頁面
this.$router.push('/register')
}
}
methods: {
goBack() {
//在方法中通過調用go()方法使頁面回退或者前進
this.$router.go(-1)
}
}
