学习笔记之vue_vue next query-CSDN博客

本文链接：https://blog.csdn.net/Fellow_Y/article/details/81633850

本文介绍了Vue路由的导航守卫功能，特别是全局守卫的应用场景，如实现登录拦截。通过一个生动的检票员比喻，阐述了全局守卫如何控制页面访问权限，确保只有持有'凭证'(如登录状态)的用户才能访问特定页面。并提供了一个简单的登录拦截案例作为示例。

摘要由CSDN通过智能技术生成

vue路由之导航守卫

1、全局守卫

应用场景
在浏览一些网站的时候我们会发现有些地方不登录是进不去的，像个人中心，我的订单，会直接跳转到登陆页。
so，怎么实现这个功能呢？
举个简单的小例子：
周末和家人一起开开心心去公园，突然想去动物园转一转，要知道动物园是需要买票的，走到门口检票员一看你没票，”不好意思先生，我们这需要买票才能进哦”，然后你就赶紧去买票，这样你才能进去。
全局守卫可以说是担任检票员的工作，跳转的工作只有你拥有凭证（票）之后才可以进行，不然的话只能老老实实去买票。先来完成上面这个案例：

...
<body>
<div id="app">
  <router-view></router-view>   
</div>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script>
/*
  /park
    公园不需要门票
  /zoo
    动物园需要门票
  /ticket
    售票处         
*/
  //创建组件
  const Park = {
    template:`
      <div>公园</div> 
    `
  }
  const Zoo = {
    template:`
      <div>动物园</div>
    `
  }
  const Ticket = {
    template:`
      <div>售票处
        <br>
        <button @click = "getTicket">买票</button>
      </div>
    `,
    methods:{
      getTicket(){
        //买票成功
        sessionStorage.setItem(<