Здравствуйте, уважаемые разработчики!
Я новичок в Vue.js и сейчас борюсь за одну визуальную проблему.При перемещении пользователя с navbar на предыдущую страницу через <b-dropdown-item @click="go_login">Login</b-dropdown-item>, где go_login () =
go_login: function () {
this.$router.push('/login')
}
страница перенаправляется накомпонент login , но высота страницы не обновляется.Этого не происходит, если вместо этого вы используете href="/login" или вводите адрес непосредственно в адресной строке браузера, но я не хочу (не хотел бы) использовать href.
Чего мне не хватает?
Мой код:
router / index.js
import Vue from 'vue'
import Router from 'vue-router'
import store from '../store/store'
import userLogin from '../views/userLoginPage'
import landingPage from '../views/landingPage'
import admin from '../views/admin'
import userRegistration from '../views/userRegistration'
import userPasswordReset from '../views/userPasswordReset'
import pageNotFound from '../views/404'
import userProfile from '../views/userProfile'
Vue.use(Router)
// checks if user is authenticated and allowed to se the page
const ifAuthenticated = (to, from, next) => {
if (store.getters.isAuthenticated) {
next()
return
}
next('/login')
}
/**
* icon names can be found on fontawesome page
* for example https://fontawesome.com/icons/volume-up?style=solid
*/
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'landingPage',
component: landingPage,
props: {msg: 'Welcome to Tonefeed!', icon: 'volume-up'}
},
{
path: '/login',
name: 'userLogin',
component: userLogin,
props: {msg: 'Sign in', icon: 'key'}
},
{
path: '/profile',
name: 'userLProfile',
component: userProfile,
props: {msg: 'Profile', icon: 'user'},
beforeEnter: ifAuthenticated
},
// for testing purposes guests are not allowed to see this page
{
path: '/admin',
name: 'bootstrapExamples',
component: admin,
props: {msg: 'Admin', icon: 'user-ninja'},
beforeEnter: ifAuthenticated
},
{
path: '/register',
name: 'register',
component: userRegistration,
props: {msg: 'Registration', icon: 'pen-alt'}
},
{
path: '/password-reset',
name: 'userPasswordReset',
component: userPasswordReset,
props: {msg: 'Password reset', icon: 'unlock'}
},
{
path: '/404',
name: 'pageNotFound',
component: pageNotFound,
props: {msg: '404', icon: 'exclamation-triangle'}
},
// if url is unknown => redirect to 404
{
path: '*',
redirect: '/404'
}
],
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
})
компонентов / navigationBar.vue
<template>
<b-navbar :class="{'classA navbar-dark': scrollPosition < 64, 'classB navbar-light': scrollPosition > 64}"
toggleable="md">
<b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
<b-navbar-brand>
<font-awesome-icon :icon="icon"></font-awesome-icon>
Tonefeed
</b-navbar-brand>
<b-collapse is-nav id="nav_collapse">
<b-navbar-nav>
<b-nav-item>Column 1</b-nav-item>
<b-nav-item>Column 2</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-form>
<b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
<button
:class="{'button btn btn-outline-primary btn-sm': scrollPosition < 64, 'button btn btn-outline-secondary btn-sm': scrollPosition > 64}">
Search
</button>
</b-nav-form>
<b-nav-item-dropdown text="Lang" right>
<b-dropdown-item>EN</b-dropdown-item>
<b-dropdown-item>DE</b-dropdown-item>
<b-dropdown-item href="/login">RU</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown text="User" right>
<b-dropdown-item @click="go_profile">Profile</b-dropdown-item>
<b-dropdown-item @click="go_home">Logout</b-dropdown-item>
<b-dropdown-item @click="go_login">Login</b-dropdown-item>
<b-dropdown-item @click="go_register">Register</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</template>
<script>
export default {
name: 'navBar',
data () {
return {
scrolled: false,
scrollPosition: null
}
},
props: {
icon: String
},
methods: {
go_login: function () {
this.$router.push('/login')
},
go_home: function () {
this.$store.dispatch('AUTH_LOGOUT')
.then(() => {
this.$router.push('/')
})
},
go_register: function () {
this.$router.push('/register')
},
go_profile: function () {
this.$router.push('/profile')
},
handleScroll () {
this.scrolled = window.scrollY > 0
this.scrollPosition = window.scrollY
}
},
mounted () {
window.addEventListener('scroll', this.handleScroll)
},
destroy () {
window.removeEventListener('scroll', this.handleScroll)
}
}
</script>
<style>
.classA.navbar-dark {
position: fixed;
width: 100%;
background: transparent;
transition: .5s ease-in-out;
}
.classB.navbar-light {
position: fixed;
width: 100%;
background: white;
transition: .5s ease-in-out;
}
.topnav a:hover {
background-color: white;
color: black;
}
</style>
App.vue
<template>
<div class="container-fluid">
<div>
<navigationBar v-bind:icon="icon"></navigationBar>
</div>
<div id="app" class="container">
<router-view :key="$route.fullPath"></router-view>
</div>
</div>
</template>
<script>
import navigationBar from './components/navigationBar'
export default {
name: 'app',
data () {
return {
icon: 'volume-up'
}
},
components: {
navigationBar: navigationBar
},
// if token expires the user should log out
created: function () {
this.axios.interceptors.response.use(undefined, function (err) {
return new Promise(function (resolve, reject) {
if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
// if you ever get an unauthorized, logout the user
this.$store.dispatch('AUTH_LOGOUT')
// you can also redirect to /login if needed !
}
throw err
})
})
}
}
</script>
<style lang="scss">
@import './styles/custom-bootstrap.scss';
@import '../node_modules/bootstrap/scss/bootstrap.scss';
body {
background: url("./assets/overlay2.png"), url("./assets/overlay3.svg");
background-position: top left, center center;
background-size: auto, cover;
background-attachment: fixed;
}
.container-fluid{
padding: 0;
display: flex;
flex-direction: column;
}
#app {
padding-top: 4rem;
}
a, a:hover {
color: white;
text-decoration: none;
}
</style>