[vue.js]关于路由配置的登录判断跳转二级页面

首先说明引用书籍《Vue.js前端开发实战教程》

一、问题描述

准备三个页面，登录页面、主页面、二级页面，访问每一个页面时需要判断用户有没有登录，如果没有登录就要跳转到登录页面先登录，只有当登录的用户名和密码输入正确时才能登录，否则提示登录失败。登录成功跳转到主页面，在主页面 点击链接可以跳转到二级页面，但是在离开主页面之前需要弹出提示框让用户确认是否离开，只有当用户确认离开时才能跳转到二级页面。

另外，之后给路由跳转添加一个动画效果，动画效果需要根据路径（path）长度来选择，如果即将跳转到的的路由path比当前页面的长，就用其相应的动画效果，否则使用另一种动画效果。

二、代码

1.router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Foo from "@/views/Foo";
import Second from "@/views/Second";
import Login from "@/views/Login";


Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        redirect: '/login',
        component: Login
    },
    {
        path: '/index',
        component: Foo,
        meta: {
            requiresAuth: true
        }
    },
    {
        path: '/index/second',
        component: Second,
    },
    {
        path: '/login',
        component: Login
    }
]
const router = new VueRouter({
    routes,
    mode: 'history'
})

export default router

2.views/Foo.vue

<template>
  <div>
    登录成功！我是首页
    <router-link to="/index/second">跳转到二级页面
    </router-link>
  </div>
</template>

<script>
export default {
  name: "Foo",
  beforeRouteLeave(to, from, next) {
    const answer = window.confirm('是否真的要退出？')
    if (answer) {
      next()
    } else {
      next(false)
    }
  }
}
</script>

<style scoped>

</style>

3.views/Login.vue

<template>
  <div>
    <p>用户名：<input type="text" v-model="username"></p>
    <p>密码：<input type="password" v-model="password"></p>
    <p><input type="button" value="登录" @click="login"></p>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    login() {
      if(this.username === 'admin' && this.password === '123456') {
        localStorage.login = true
        this.$router.push('/index')
      } else {
        alert('登录失败，用户名或密码不正确！')
      }
    }
  }
}
</script>

<style scoped>

</style>

4.views/Second.vue

<template>
  <div>我是二级页面
    <router-link to="/index">返回index页面</router-link>
  </div>
</template>

<script>
export default {
  name: "Second"
}
</script>

<style scoped>

</style>

4.app.vue

<template>
  <div id="app">
    <h1 v-if="$route.path==='/login'">请登录!</h1>
    <h1 v-else>Hello admin!</h1>
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

5.main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  watch: {
    '$route' (to, from) {
      const toDepth = to.path.split('/').length
      const fromDepth = from.path.split('/').length
      this.transitionName = toDepth < fromDepth ? 'bounce' : 'slide-fade'
    }
  },
  data() {
    return {
      transitionName: ''
    }
  },
  render: h => h(App)
}).$mount('#app')

---

如果这篇帖子对你有帮助，点点赞关注支持一下公子！！！

最后运行效果：