创建主 Vue 实例之前的 Vue 路由答案

【问题标题】：Vue Routing before main Vue instance created创建主 Vue 实例之前的 Vue 路由
【发布时间】：2020-02-18 18:32:20
【问题描述】：

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>

【问题讨论】：

为什么不直接在组件中获取时间？
正如我所说，这是一个例子 =D
您可以使用this.$root 从任何组件访问根实例。不是真正的最佳实践，但作为一个例子应该足够了。
您可以尝试在 Home 组件中使用 beforeRouteEnter 保护。
@josef98，它奏效了。正如你所说，这看起来不是最佳做法。我会继续努力寻找更好的方法，但至少我现在有一个替代方案。

标签： vue.js vue-component vue-router

【解决方案1】：

如果您想在mounted 中获取当前时间，那么这是行不通的，因为此时您的 Vue 实例和路由器都已创建。但是，您可以通过以下几种方式解决此问题：

在组件外创建开始时间，作为文件级常量；然后您可以简单地将路由器包装在工厂函数中并将时间值作为参数传递；请注意，这种方式的时间值将比实际安装时间少几毫秒。
直接在路由器内部创建时间；这样你就不必传入任何东西，但时间会再次偏离挂载时间。

一般来说，了解您为什么要这样做会很有帮助。这似乎是一种非常复杂的方法来实现一些非常简单的事情，所以如果有更多的背景知识，我们可能会想出一个更好的解决方案。

【讨论】：

【解决方案2】：

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

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

【讨论】：