学习笔记之vue

最新推荐文章于 2023-02-26 21:19:11 发布

VIP文章 Fellow_Y

最新推荐文章于 2023-02-26 21:19:11 发布

阅读量464

点赞数

分类专栏：学习笔记 vue

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

版权

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(<

最低0.47元/天解锁文章

Fellow_Y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记之vue

vue路由之导航守卫1、全局守卫应用场景在浏览一些网站的时候我们会发现有些地方不登录是进不去的，像个人中心，我的订单，会直接跳转到登陆页。 so，怎么实现这个功能呢？举个简单的小例子：周末和家人一起开开心心去公园，突然想去动物园转一转，要知道动物园是需要买票的，走到门口检票员一看你没票，”不好意思先生，我们这需要买票才能进哦”，然后你就赶紧去买票，这样你才能进去。全局守...
复制链接

扫一扫