<!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>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="../vue.js"></script>
<script src="../vue-router.js"></script>
<script>
/*
全局守卫 前置守卫
router.beforeEach((to, from, next) => {
to 我们要跳转的路由
from 表示我们从哪个路由跳过来的
next 守卫可以通过next控制下一步的跳转
如果写next() 则表示直接跳转到to的位置
})
售票处指登录
动物园 指需要登录才能进入的页面
公园 指不需要登录就能进入的页面
如果我们想要在路由对象上携带一些信息，那么我们可以使用meta
{
path: '/path',
component: '组件',
meta: {
key: value
}
}
通过meta我们可以给对应的路由中添加相关信息，以此来判断此路由是否需要验证
if (to.meta.requireAuth) {
// 需要验证
}
matched中包含了 自己本身路由对象及父路由和祖先路由的路由对象
*/
const Index = {
template: `
<div>
<h3>广场</h3>
<router-link to="/zoo">动物园</router-link>
<router-link to="/park">公园</router-link>
<router-link to="/ticket">售票处</router-link>
</div>
`
}
const Zoo = {
template: `
<div>动物园
<br>
<router-view></router-view>
</div>
`
}
const Ticket = {
template: `
<div>售票处
<button @click="buy">买票</button>
</div>
`,
methods: {
buy () {
// 往localStorage中添加一个属性
localStorage.setItem('ticket', 1)
}
}
}
const Park = {
template: `
<div>公园</div>
`
}
const Tiger = {
template: `
<div>老虎</div>
`
}
const routes = [
{
path: '/',
component: Index
}, {
path: '/zoo',
component: Zoo,
meta: {
// a: 1
requireAuth: true
},
children: [
{
path: 'tiger', // /zoo/tiger
component: Tiger,
children: [
{
path: 'letterTiger'
}
]
}
]
}, {
path: '/ticket',
component: Ticket
}, {
path: '/park',
component: Park
}
]
const router = new VueRouter({
routes
})
router.beforeEach((to, from, next) => {
console.log(to)
// next('/')
/* if (to.path === "/") {
next()
} else {
next('/')
} */
// 获取票
const ticket = localStorage.getItem('ticket')
// if (to.path === '/zoo' || to.path === '/zoo/tiger') {
// if (to.meta.requireAuth) {
// to.matched.some(route => route.meta.requireAuth)
if (to.matched.some(route => route.meta.requireAuth)) {
if (ticket) {
next()
} else {
next('/ticket')
}
} else {
next()
}
})
const app = new Vue({
el: '#app',
router
})
</script>
</body>
</html>
