[英]Vue this.$router.push in setTimeout
我有一个登陆页面'/'
,用户在访问我们的网站时会点击,然后我有一个加载轮,我想加载5秒,然后重定向到登录'/login'
页面。
我正在使用Vue和Bulma.io,在我的Landing.vue页面中,我有:
<template>
<div class="image">
<img src="../assets/landing.png">
<div class="loader loading"></div>
</div>
</template>
<!-- Styles -->
<style>
.loading {
border: 2px solid #dbdbdb;
border-radius: 290486px;
border-right-color: transparent;
border-top-color: transparent;
content: "";
display: block;
height: 1em;
position: absolute;
width: 1em;
transform: translate(-50%,-50%);
margin-right: -50%;
top: 30%;
left: 50%;
}
</style>
<!-- Scripts -->
<script>
setTimeout( function() { this.$router.push({ path: '/login'})},5000);
</script>
在我的路由器/ index.js我有:
/*
Necessary imports...notice I imported the two components we will use( Login and Home)
*/
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Home from '@/components/Home'
import Landing from '@/components/Landing'
// Needed to make use of the vue-router system
Vue.use(Router)
export default new Router({
// Define the routes...will add more when they are needed
routes: [
{
path: '/home', // this is the path in the URL
name: 'Home',
component: Home // created component
},
{
path: '/login', // this is the path in the URL
name: 'Login',
component: Login // created component
},
{
path: '/', // this is the path in the URL
name: 'Landing',
component: Landing // created component
}
]
})
所以我的<script>部分的功能一定有问题,对吗?
感谢您的帮助。
如果要定义脚本部分,则需要导出实际的Vue组件。
<script>
export default {
created(){
setTimeout( () => this.$router.push({ path: '/login'}), 5000);
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.