Vue Router 相关文章
Vue Router 全面详解--【一、基础篇，从零开始搭建Vue Router】
Vue Router 全面详解--【二、中级篇，路由守卫实现权限管理】
在上一篇用Vue Router 前置守卫做了一个简单的权限管理。今天我们将更全面的介绍路由守卫的各种使用场景。
首先来看Vue Router 主要有几种路由守卫。一共有3大种：
全局守卫，独享守卫，组件内的守卫。 今天我们就来看下这几种守卫各有什么用处。
回想上一篇我们做了一个登录页面。现在我们在回到登录页面。
onBeforeRouteLeave 守卫实现温馨提示
假设现在用户在页面输入了用户名，然后突然尿急，想上个厕所，上厕所回来之后，不小心鼠标点错了，点到了首页，这个时候，他在回到登录页面表单肯定被清空了，那用户就得在填一次。是不是很麻烦呢。那么我们有没有办法在用户点击了首页的时候提示一下他呢？是有的，这时候我们就可以再Vue Router 的独享守卫或者组件内的守卫里面加一个拦截。来看看具体代码实现
<template>
<div class="login-wraper">
<p>登录</p>
<div class="login-input">
<label>用户名：</label>
<input v-model="userName"/>
</div>
<div class="login-input">
<label>密码：</label>
<input type="password" v-model="password" />
</div>
<button @click="login" class="login-button">登录</button>
</div>
<el-dialog
v-model="dialogVisible"
title="Tips"
width="30%"
:before-close="cancle"
>
<p>确定要里看的登录页面吗</p>
<el-button @click="cancle">取消</el-button>
<el-button type="primary" @click="confirm">确认</el-button>
</el-dialog>
</template>
<script setup>
import { ref } from 'vue'
import { useCookies } from 'vue3-cookies'
import { useRouter, onBeforeRouteLeave } from 'vue-router'
const { cookies } = useCookies()
const userName = ref('')
const password = ref('')
function login () {
cookies.set('username', userName.value)
cookies.set('password', password.value)
alert('登录成功')
}
const dialogVisible = ref(false)
const isConfirm = ref(false)
const router = useRouter()
const toData = ref(null)
onBeforeRouteLeave(function (to, from ) {
toData.value = to
if (isConfirm.value) {
return true
} else {
dialogVisible.value = true
return false
}
})
function cancle () {
dialogVisible.value = false
}
function confirm () {
isConfirm.value = true
dialogVisible.value = false
router.push({ name: toData.value.name})
}
</script>
<style scoped>
.login-wraper {
margin: 0 auto;
width: 400px;
}
.login-input{
display: flex;
align-items: center;
margin-bottom: 20px;
}
.login-input label{
width: 120px;
}
.login-input input {
line-height: 36px;
border: 1px solid #ddd;
border-radius: 5px;
}
.login-button {
background: #296dff;
color: #fff;
}
</style>
这里为了减少写样式的时间引用了Element Plus 的弹框组件，相信大家都会用吧，没用过的，打开官网跟着步骤安装就可以了。 不会用的可以私信我，一起学习下。
这里主要用到了onBeforeRouteLeave 组件内的导航守卫，离开页面的守卫，当用户误操作点击了导航， 这个函数里面的回调函数就会触发。 我们在外面声明了一个变量， 变量在这个回调函数里面接收了to的值，方便点击确定的时候继续跳转。 我们还还在外面声明了一个变量用来保存是否点击过确认，如果点击过确认，我们就我们在确认函数里面将值改为了true,再次进入离开的守卫的回调时。就返回true 直接跳转了。否则弹出确认要离开登录页面的提示。
路由守卫实现访问时长统计
加上产品现在提了一个需求，他想统计用户在每篇文章详情页面的停留时间，该怎么办呢？ 这个时候我们就可以一起利用组件内的后置守卫来实现。具体实现来看下面的代码。
<template>
<h1>{{ article.title }}</h1>
<p>{{ article.detail }}</p>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, onBeforeRouteLeave } from 'vue-router'
import { useCookies } from 'vue3-cookies'
import data from './data'
const route = useRoute()
const article = ref({})
let startTime = 0 //
onMounted(() => {
startTime = Date.now()
const id = route.params.id
article.value = data.find(item => item.id == id)
})
let endTime = 0
onBeforeRouteLeave(() => {
endTime = Date.now()
uploadTime()
})
function uploadTime () {
const { cookies } = useCookies()
const data = {
time: endTime - startTime,
id: article.id,
userName: cookies.get('username')
}
alert(`上传成功,${cookies.get('username')} 在 ${ article.value.title } 文章详情页面停留了${data.time / 1000} 秒`)
}
</script>
<style></style>
在onMounted 时我们开始统计时间，离开时上传时间 离开时我们就能看见如下效果。
Vue Router 相关文章
