CODEWITHSUNDEEP
vue.jsvue-componentvue-router
3rdSenna
3rdSenna

Reputation: 376

Vue Routing before main Vue instance created

The Vue Router loaded before the main Vue instance, but to load that Router, I supposed to have some information ready to then pass them as Property to this Route. In this example it's the currentTime from main Vue Instance to pass to Home screen.

Maybe keeping everything on $Store would fix it, but at the moment to project doesnt have Vuex implemented. I can't do it now.

Any suggestion?

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>

enter image description here

enter image description here

Upvotes: 4

Views: 1826

Answers (2)

dr_barto
dr_barto

Reputation: 6065

If you want to take the current time in mounted then this won't work, because at this moment both your Vue instance and your router already have been created. However, you can work around this in a few ways:

  • Create the start time outside the component, as a file-level constant; then you can simply wrap your router in a factory function and pass the time value as parameter; note that this way the time value will be a few milliseconds off the actual mount time.
  • Create the time directly inside the router; this way you don't have to pass anything in, but again the time will be a bit off from the mount time.

In general it would be helpful to understand why you want to do this. It seems to be a pretty complicated way of achieving something pretty simple, so with more background we might come up with a better solution.

Upvotes: 0

dsaves
dsaves

Reputation: 301

The router is used to display content at certain URL locations (eg. mysite.com/#/home or mysite.com/#/cart). It isn't used to pass variables around. For that you want to use the Vuex $store.

From what I understand, you don't need to change the Vue router for displaying the time on the main page; you want to edit components/Home.vue to display the time. I think that is the only file you need to edit.

Upvotes: 1

Related Questions