CODEWITHSUNDEEP
vue.jsvue-router
clean314
clean314

Reputation: 71

vue-router : the page remains the same

I want to show 'Welcome.vue' when i move to localhost:8080/main

[main.js]

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import Vuelidate from 'vuelidate'

Vue.config.productionTip = false
Vue.use(Vuelidate)

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

[router/index.js]

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Welcome = () => {
  console.log("why") //This worked.
  return import(/* webpackChunkName: "welcome_page" */'@/components/Page/Welcome.vue')
}

export default new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes : [
    {
      path : '/main',
      name : 'welcome_page',
      component : Welcome 
    },
  ]
});

[src/components/Page/Welcome.vue]

<template>
<div>
    <h1>Welome</h1>
</div>
</template>

<script>
    export default {
        name: 'welcome_page',
    };
</script>

the 'console.log ("why")'(in router/index.js) worked when i move to localhost:8080/main, but browser still shows the page of App.vue

Upvotes: 1

Views: 94

Answers (1)

clean314
clean314

Reputation: 71

I added < router-view /> in App.vue. It's working well now.

[App.vue]

<template>
<router-view/>
</template>

Upvotes: 1

Related Questions