自學Vue的第05天：路由
路由跳轉原理之雜湊模式
監聽hashchange事件，url的hash是否改變
核心是錨點值的改變，如果我們監聽到錨點值改變了，就去區域性改變頁面資料，不做跳轉。
與傳統的URL改變後立即發起請求，響應整個頁面，渲染整個頁面比，路由跳轉使用者體驗更好。
<a href="#/login">登陸</a><br/>
<a href="#/register">註冊</a>
<div id="app">
</div>
<script type="text/javascript">
var appDiv = document.getElementById('app');
window.addEventListener('hashchange', function (e) {
console.log(location.hash);
})
</script>
</body>
複製程式碼
我們點選登陸或註冊連結的時候，url的hash值被改變，然後被監聽到。
我們可以根據監聽到的結果值不同，進行不同的頁面渲染
<script type="text/javascript">
var appDiv = document.getElementById('app');
window.addEventListener('hashchange', function (e) {
console.log(location.hash);
switch (location.hash) {
case '#/login':
appDiv.innerHTML = '我是登陸頁面';
break;
case '#/register':
appDiv.innerHTML = '我是註冊頁面';
break
}
})
</script>
複製程式碼- 效果
vue-router的安裝與使用
<a href="#/login">登陸</a><br/>
<a href="#/register">註冊</a>
<div id="app">
</div>
<script type="text/javascript"></script>
複製程式碼非常簡單
其實就是根據當前錨點的不同，載入不同的Vue元件
路由跳轉
標籤跳轉：router-link
效果和上一節是一樣的，相當於改變了當前頁面的錨點
js控制跳轉
gologin(){
// this.$router.push({path: '/login'})
//replace沒辦法返回上一頁
this.$router.replace({path: '/login'})
}
複製程式碼路由的傳參與取參
路由跳轉的時候，引數傳遞是很常用的功能
傳值
var Login = {
template: `<div>我是登陸頁面</div>`
}
var Register = {
template: `<div>我是註冊頁面</div>`
}
<!--第一步 安裝路由外掛-->
Vue.use(VueRouter)
//第二步 建立路由物件
var router = new VueRouter({
// 第三步 配置路由規則
routes: [
{path: '/login', name: 'login', component: Login},
{path: '/register/:foo', name: 'register', component: Register}
]
})
new Vue({
el: '#app',
router: router,
template: `<div>
<router-link :to="{name:'login',query:{id:'123'}}">去登陸</router-link><br/>
<router-link :to="{name:'register',params:{foo:'bar'}}">去註冊</router-link><br/>
<router-view></router-view>
</div>`,
data() {
return {}
}
})
</script>
複製程式碼query引數是通過url後的鍵值對傳遞引數的#/login?id=123
params引數是拼接在url的path中的#/register/bar
取值
props傳參與取參
這種方式參傳遞與獲取params引數的時候更方便
js傳參
目前我們都是通過配置:to屬性進行引數傳遞的，
在通過js進行頁面跳轉的時候，也可以帶上引數
- 完整程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue學習</title>
<script src="../vue.js"></script>
<script src="../vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript"></script>
</body>
</html>
複製程式碼一個小問題
我們在兩處使用js進行跳轉，或者用標籤跳轉，也是一樣的，都會存在傳遞的引數確實改變了，但是頁面並沒有變化的問題
這是因為兩次跳轉的錨點並沒有變化，所以頁面會重新載入。改變url引數不會改變錨點
那麼怎麼辦呢？
<router-view :key="$route.fullPath"></router-view>
- 完整程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue學習</title>
<script src="../vue.js"></script>
<script src="../vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript"></script>
</body>
</html>
複製程式碼巢狀路由
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue學習</title>
<script src="../vue.js"></script>
<script src="../vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript">
var Nav = {
template: `
<div>
<router-view></router-view>
<router-link :to="{name:'nav.index'}">首頁</router-link>
|
<router-link :to="{name:'nav.pensonal'}">個人中心</router-link>
|
<router-link :to="{name:'nav.message'}">資訊</router-link>
|
<router-link :to="{name:'nav.mine'}">我的</router-link>
</div>
`,
}
var Index = {
template: `
<div>首頁</div>
`,
}
var Pensonal = {
template: `
<div>個人中心</div>
`,
}
var Message = {
template: `
<div>資訊</div>
`,
}
var Mine = {
template: `
<div>我的</div>
`,
}
//安裝路由外掛
Vue.use(VueRouter);
//建立路由物件
var router = new VueRouter({
//配置路由物件
routes: [
{
path: '',
redirect: '/nav'
},
{
path: '/nav',
name: 'nav',
component: Nav,
//巢狀路由增加這個屬性
children: [
//配置我們的巢狀路由
{path: '', redirect: '/nav/index'},
{path: 'index', name: 'nav.index', component: Index},
{path: 'pensonal', name: 'nav.pensonal', component: Pensonal},
{path: 'message', name: 'nav.message', component: Message},
{path: 'mine', name: 'nav.mine', component: Mine},
]
}
]
})
new Vue({
el: '#app',
router,
template: `
<div>
<router-view></router-view>
</div>
`,
data() {
return {}
},
methods: {}
})
</script>
</body>
</html>
複製程式碼路由守衛
