javascript - Vue js路由到另一个页面后不重新渲染页面高度

Question

亲爱的开发者您好!

我是 Vue.js 新手，现在正在为一个视觉问题而苦苦挣扎。通过 <b-dropdown-item @click="go_login">Login</b-dropdown-item> 将用户从导航栏导航到上一页时其中 go_login() =

go_login: function () {
this.$router.push('/login')
}

页面路由到登录组件，但页面高度不会更新。如果您使用href="/login"，则不会发生这种情况相反，或者直接在浏览器地址栏中输入地址，但我不想(不喜欢)使用 href .

我错过了什么？

我的代码:

路由器/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>

Answer 1

我认为您面临的问题是由于您使用时页面没有刷新:(因为它是单页应用程序)

this.$router.push('/login')

当您使用 href 导航时，它会刷新页面的全部内容，与直接输入 url 的情况相同。

因此，为了使组件采用实际的宽度和高度，您应该使用:

location.reload(); // in the components life cycle hook

请告知这是否适合您。