CODEWITHSUNDEEP
vue.jsvue-router
Inphyy
Inphyy

Reputation: 69

Problems adding router-view

I am trying to add to my project already created with Vue router-view, actually checking the web I have found some options but so far nothing works for me.

        <template>
      <div id="app">
        <div id="nav">
          <router-link to="/">Home</router-link> |
          <router-link to="/about">About</router-link>
        </div>
        <router-view/>
      </div>
    </template>

    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
    }

    #nav {
      padding: 30px;
    }

    #nav a {
      font-weight: bold;
      color: #2c3e50;
    }

    #nav a.router-link-exact-active {
      color: #42b983;
    }
    </style>

router.js :

    import vue from 'vue'
    import Router from 'vue-router'

    vue.use(Router)

    export default new Router({
        mode: 'history',
        base: process.env.BASE_URL,
        router: [
            {
                path: '/',
                name: 'home',
                component: () => import('./components/Views/Home.vue')
            },
            {
                path: '/about',
                name: 'about',
                component: () => import('./components/Views/about.vue')
            }
        ]
    })

main.js

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

    Vue.config.productionTip = false

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

But it doesn't really work for me, I can't navigate between the pages, something am I doing wrong?

When I run my vue ui command and create my project with Router if it works fine for me but it creates another project for me, really what I am looking for is to add my router to the already created project

Upvotes: 0

Views: 511

Answers (1)

Noy Gafni
Noy Gafni

Reputation: 1201

You need to add the router in your main.js file like so:

    import Vue from 'vue'
    import App from './App.vue'
    import router from '@/router' // should be the location of your router file

    Vue.config.productionTip = false

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

Upvotes: 1

Related Questions