vue.js - 创建主 Vue 实例之前的 Vue 路由

Question

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

也许将所有内容保留在 $Store 上可以解决这个问题，但目前 to project 还没有实现 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 以显示时间。我认为这是您需要编辑的唯一文件。