403 vue路由进阶：元信息，编程式导航，导航守卫
5.1 元信息
- **作用 **
在路由导航的时候，可以用作判断
- 规则声明
routes： [
{
path： '/header'，
component： header，
meta： {
title： 'XXXX'
}
}
]
- 获取
created() {
document.title = this.$route.meta.title
}
01-元信息.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
3个准备工作
4个具体步骤
元信息 : 路由里添加 meta 字段
-->
<div id="app">
<router-view></router-view>
<h1 id="haha">哈哈</h1>
<h1>嘿嘿</h1>
</div>
<script src="./vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
//组件
const One = {
template: `<div>one组件</div>`,
created() {
// 有了这个meta 可以做很多事情
// console.log(this.$route.meta.title)
// 可以设置标题
document.title = this.$route.meta.title
console.log(document.querySelector('#haha').innerHTML) // 哈哈 【不应该在这里操作DOM】
console.log(111) // 111
}
}
const Two = {
template: `<div>two组件</div>`,
created() {
document.title = this.$route.meta.title
}
}
// 实例化 + 挂载
const router = new VueRouter({
routes: [{
path: '/one',
name: 'one',
component: One,
meta: {
title: '帅气的马哥'
}
}, {
path: '/two',
name: 'two',
component: Two,
meta: {
title: '骚气的春春'
}
}]
})
const vm = new Vue({
router,
el: '//app',
data: {}
})
</script>
</body>
</html>
5.2 编程式导航
const one = {
template： `
<div>
<button @click="handleClick('back')">返回 上一页</button>
<button @click="handleClick('push')">跳转 two页</button>
<button @click="handleClick('replace')">替换 two页</button>
</div>
`，
methods： {
handleClick(type) {
if (type == 'back') {
// 返回
this.$router.back()
} else if (type == 'push') {
// 跳转 有历史记录
this.$router.push('/two')
} else {
// 替换 没有历史记录
this.$router.replace('/two')
}
}
}
}
const two = {
template： `<p>two </p>`
}
02-编程式导航.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
入口
1. 手动url修改 /one
2. 声明式导航 <router-link to='/one'>one</router-link>
3. 编程式导航 this.$router.push('/one')
（1）前进(跳转) ==>
- this.$router.push() - 有记录 【可以后退】
- this.$router.replace() - 没有记录 【不可以后退】
（2）返回 ====> this.$router.back()
-->
<div id="app">
<router-view></router-view>
</div>
<script src="./vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
//组件
const One = {
template: `
<div> one组件
<button @click="handle('push')"> 跳转到two - push </button>
<button @click="handle('back')"> 返回到/ </button>
<button @click="handle('replace')"> 跳转到two - replace </button>
</div>`,
methods: {
handle(type) {
if (type == 'push') {
// $route： 路由对象，解析url信息 (属性 .path .name .meta .params)
// $router： VueRouter的路由实例，挂载到vue实例上后，就是$router，用于编程式导航 (方法 )
// push => 有记录的 【这里的push是vue的跳转，不是原生js的】
this.$router.push('/two')
} else if (type == 'back') {
this.$router.back()
} else if (type == 'replace') {
// replace => 没有记录的
this.$router.replace('/two')
}
}
}
}
const Two = {
template: `<div>two组件</div>`
}
// 实例化 + 挂载
const router = new VueRouter({
routes: [{
path: '/one',
name: 'one',
component: One
}, {
path: '/two',
name: 'two',
component: Two
}]
})
const vm = new Vue({
router,
el: '//app',
data: {}
})
</script>
</body>
</html>
5.3 导航守卫
router.beforeEach((to， from， next) => {
// 访问 login
if (to.name == 'login') {
// 下一步
next()
} else {
// 停止跳转
next(false)
// 跳转到下一步
next({ name： 'login' }) 或者 使用路径 next('/login')
}
})
03-导航守卫.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
导航守卫 : 是通过跳转或者取消的方式守卫导航 A => 导航守卫 => B
需求 : 所有的页面经过登录 之后才准访问
1. => login 可以
2. => one => 访问login => 登录之后 => one
前置导航守卫 beforeEach
概念 : 是通过跳转或者取消的方式守卫导航 拦截
1. 写法 router.beforeEach( (to,from ,next)=> {} )
2. to : 目标路由对象 from : 来源路由对象 next: 下一步
3. next() 允许下一步
next(false) 不允许
next('/login') 跳转到login
-->
<div id="app">
<router-view></router-view>
</div>
<script src="./vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
//组件
const One = {
template: `<div>one组件</div>`
}
const Login = {
template: `<div>Login组件</div>`
}
// 实例化 + 挂载
const router = new VueRouter({
routes: [{
path: '/one',
name: 'one',
component: One
}, {
path: '/login',
name: 'login',
component: Login
}]
})
// 导航守卫
// /one => /login
// to : 目标路由对象($route)
// from : 来源路由对象
// next() 下一步
router.beforeEach((to, from, next) => {
// console.log('from:', from)
console.log('to:', to)
// 如果访问 login => 允许访问 next
if (to.name == 'login') {
next() // next()中不用传递路径 '/login'，否则会无限循环，直到报错。
} else if (to.name == 'one') {
next()
} else {
next(false); // 不允许访问 next(false)
// next('/login'); // 如果不是login => 转到 login
// next({ name: 'login' })
}
})
const vm = new Vue({
router, // 挂载
el: '//app',
data: {}
})
</script>
</body>
</html>
--
