在创建主要Vue实例之前进行Vue路由

Question

Vue路由器在主Vue实例之前加载，但是要加载该路由器，我应该准备好一些信息，然后将它们作为属性传递给此Route。在此示例中，这是从主Vue实例传递到主屏幕的currentTime。

也许将所有内容保留在$ Store上可以解决该问题，但是目前无法实现Vuex。我现在做不到。

有什么建议吗？

  

main.js

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

Vue.config.productionTip = false

new Vue({
  data() {
    return {
      currentTime: 0
    }
  },
  router,
  created(){
    console.log("Vue created")
  },
  mounted(){
    console.log("Vue mounted")
    this.currentTime = Date.now()
  },
  render: h => h(App)
}).$mount('#app')

  

/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    props: {time: "I_WANT_MY_TIME_HERE"},
    beforeEnter (to, from, next){
      console.log("beforeRouteEnter on Home")
      next()
    } 
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

  

/components/Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <h1>{{displayTime}}</h1>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'home',
  props: ['time'],
  data() {
    return {
      displayTime: 0
    }
  },
  mounted(){
    console.log("mounted Home")
    this.displayTime = this.time
  },
  components: {
    HelloWorld
  }
}
</script>

Answer 1

路由器用于在某些URL位置显示内容（例如，mysite.com /＃/ home或mysite.com/#/cart）。它不用于传递变量。为此，您想使用Vuex $ store。

据我了解，您无需更改Vue路由器即可在主页上显示时间；您要编辑components / Home.vue以显示时间。我认为这是您唯一需要编辑的文件。

Answer 2

如果您想使用mounted中的当前时间，则此操作将不起作用，因为此时您的Vue实例和路由器均已创建。但是，您可以通过以下几种方法解决此问题：

• 在组件外部创建开始时间，作为文件级常量；然后，您只需将路由器包装在工厂函数中，然后将时间值作为参数传递；请注意，通过这种方式，时间值将比实际的安装时间短几毫秒。
• 直接在路由器内部创建时间；这样一来，您无需传递任何内容，但是时间又会比挂载时间少一点。

---

通常，了解为什么要执行此操作将很有帮助。这似乎是实现简单目标的一种非常复杂的方法，因此，有了更多的背景知识，我们可能会提出更好的解决方案。