导航守卫
一、 知识点
1、什么是导航守卫?
(1)vue-router提供的导航守卫主要用来监听路由的进入和离开。
(2)vue-router提供了beforeEach和afterEach的函数, 它们会在路由即将改变前和改变后触发。
2、 为什么要用导航守卫？
我们来考虑一个需求: 页面跳转时如何改变网页的标题呢?
网页标题是通过来显示的, 但是应用只有一个固定的HTML, 切换不同的页面时, 标题并不会改变。但是我们可以通过JavaScript来修改<title>的内容.window.document.title = '新的标题'。</span></p>
<p><span style="font-size: 18pt">那么在Vue项目中, 在哪里修改? 什么时候修改比较合适呢?</span></p>
<p><span style="font-size: 18pt"><strong>方法一、</strong></span></p>
<p><span style="font-size: 18pt">每一个路由对应的组件.vue文件中，通过mounted声明周期函数, 执行对应的代码进行修改即可。</span></p>
<p><span style="font-size: 18pt">缺点：但是当页面比较多时, 这种方式不容易维护(因为需要在多个页面执行类似的代码).</span></p>
<p><span style="font-size: 18pt"> </span></p>
<p><span style="font-size: 18pt"><strong>方法二、</strong></span></p>
<p><span style="font-size: 18pt"> 使用导航守卫就比较容易做到这点。</span></p>
<p><span style="font-size: 18pt">// 前置守卫(guard)</span></p>
<p><span style="font-size: 18pt">//参数说明</span></p>
<p><span style="font-size: 18pt">//to: 即将要进入的目标的路由对象.</span></p>
<p><span style="font-size: 18pt">//from: 当前导航即将要离开的路由对象.</span></p>
<p><span style="font-size: 18pt">//next: 调用该方法后执行</span></p>
<p><span style="font-size: 18pt">router.beforeEach((to, from, next)</span></p>
<p><span style="font-size: 18pt"> </span></p>
<p><span style="font-size: 18pt">// 后置钩子(hook)</span></p>
<p><span style="font-size: 18pt">router.afterEach((to, from)</span></p>
<p><span style="font-size: 18pt"> </span></p>
<p><span style="font-size: 18pt">补充：更多的导航守卫可以在官网查看学习</span></p>
<p><span style="font-size: 18pt">https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E8%B7%AF%E7%94%B1%E7%8B%AC%E4%BA%AB%E7%9A%84%E5%AE%88%E5%8D%AB</span></p>
<h3><span style="font-size: 18pt">二、效果</span></h3>
<p><span style="font-size: 18pt"> </span></p>
<p><span style="font-size: 18pt"></span></p>
<p><span style="font-size: 18pt"> </span></p>
<p><span style="font-size: 18pt">点击about</span></p>
<p><span style="font-size: 18pt"> </span></p>
<p><span style="font-size: 18pt"></span></p>
<p><span style="font-size: 18pt"> </span></p>
<h3><span style="font-size: 18pt">三、代码结构</span></h3>
<p><span style="font-size: 18pt">注：主要是标红的几个文件</span></p>
<p><span style="font-size: 18pt"> </span></p>
<p><span style="font-size: 18pt"></span></p>
<h3><span style="font-size: 18pt">四、代码</span></h3>
<p><span style="font-size: 18pt">index.js</span></p>
<pre class="brush:javascript;gutter:true;">//引入路由
import {
createRouter,
createWebHistory
} from 'vue-router'
import Home from '../views/Home.vue'
//定义路由
const routes = [{
path: '/',
name: 'Home',
component: Home,
meta: {
title: '首页'
}
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue') ,
meta: {
title: '关于'
}
}
]
//创建路由
const router = createRouter({
//createWebHashHistory hash模式路径前面会多一个#号
history: createWebHistory(process.env.BASE_URL),
routes
})
// 前置守卫(guard)
//参数说明
//to: 即将要进入的目标的路由对象.
//from: 当前导航即将要离开的路由对象.
//next: 调用该方法后执行
router.beforeEach((to, from, next) => {
// 从from跳转到to
document.title = to.matched[0].meta.title
console.log('++++');
//beforeEach方法必须调用
next()
})
// 后置钩子(hook)
router.afterEach((to, from) => {
console.log('----');
})
//返回了路由
export default router
</pre>
<p><span style="font-size: 18pt">App.vue</span></p>
<pre class="brush:javascript;gutter:true;"><template>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
</div>
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
</template>
<script>
</script>
</pre>
<p><span style="font-size: 18pt">Home.vue</span></p>
<pre class="brush:javascript;gutter:true;"><template>
<div class="home">
<p>Home Page</p>
<img alt="Vue logo" src="../assets/logo.png">
</div>
</template>
</pre>
<p><span style="font-size: 18pt">About.vue</span></p>
<pre class="brush:javascript;gutter:true;"><template>
<div class="about">
<h1>about page</h1>
</div>
</template>
</pre>
<p><span style="font-size: 18pt"> </span></p>
<p><span style="font-size: 18pt"> </span></p>
</div>
<!--conend-->
<div class="p-2"></div>
<div class="arcinfo my-3 fs-7 text-center">
<a href='/t/etagid239-0.html' class='tagbtn' target='_blank'>vue</a>
</div>
<div class="p-2"></div>
</div>
<div class="p-2"></div>
<!--xg-->
<div class="lbox p-4 shadow-sm rounded-3">
<div class="boxtitle"><h2 class="fs-4">相关</h2></div>
<hr>
<div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565979.html">创建vue项目的第一步——之安装vue 命令更新了</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565990.html">vue打包报错</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565272.html">vue登录页面后台返回验证码图片</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564641.html">Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564897.html">vue axios 1 创建项目及简单配置axios</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564552.html">vue两层list循环后，内层循环页面选择类型</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564506.html">HMVue1.5【Source Map】</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-563914.html">vue代理服务器proxy详情配置信息</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-562341.html">[转]Vue-cli3.x引入本地json报404 解决方案</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-562421.html">[转]Vue CLI 3搭建vue+vuex 最全分析</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-561824.html">AntDesign vue学习笔记（三）嵌套路由使用</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div><div class="row g-0 py-2 border-bottom align-items-center">
<div class="col-7 col-lg-11 border-lg-end">
<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-561925.html">vue 多项目部署---二级目录</a></h3>
<div class="ltag fs-8 d-none d-lg-block">
</div>
</div>
</div>
<!---->
<!---->
</div>
<!--xgend-->
</div>
<div class="col-lg-3 col-12 p-0 ps-lg-2">
<!--box-->
<!--boxend-->
<!--<div class="p-2"></div>-->
<!--box-->
<div class="lbox p-4 shadow-sm rounded-3">
<div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div>
<div class="clearfix"></div>
<ul class="m-0 p-0 fs-7 r-tag">
</ul>
<div class="clearfix"></div>
</div>
<!--box end-->
</div>
</div>
</div>
</main>
<div class="p-2"></div>
<footer>
<div class="container-fluid p-0 bg-black">
<div class="container p-0 fs-8">
<p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p>
</div>
</div>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script>
</body>
</html>