首先说明引用书籍《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')
如果这篇帖子对你有帮助,点点赞关注支持一下公子!!!
最后运行效果: