Routing between two components in Vue.js

Question

Well, this is my App.vue:

    <template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Home/>
    <AddService/>
  </div>
</template>

<script>
import Home from './components/Home.vue'
import AddService from './components/AddService.vue'
import Vue from 'vue'
import VueRouter from 'vue-router'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/home',
            name: 'home',
            component: Home
        },
         {
            path: '/addService',
            name: 'addService',
            component: AddService
        }
    ]
});
        
Vue.use(router)


export default {
  name: 'App',
  components: {
    Home
  }
}
</script>

I'd like to route between the Home and AddService Component. My Home page has a link which is basically this: <a href="../addService">Add a new Service</a>

And if I press on this link I should get redirected to the AddService Component. But at the moment it only adds the right url in the search bar but I don't get redirected

Maantje · Accepted Answer · 2021-05-06 10:03:44Z

1

When using Vue router you are not supposed to make your own anchor tags with hrefs for navigation. To navigate you can use the router-link component.

If you want to programmatically navigate you can use the push method on the router.

answered May 6, 2021 at 10:03

Maantje

1,8012 gold badges22 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abregre · Accepted Answer · 2021-05-06 10:41:11Z

Your App.vue should look like this

<template>
    <div id="app">
        <router-view />
    </div>
</template>

Your index.js should look like this

import Vue from 'vue'
import App from '@/App.vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home'
import AddService from '@/components/AddService'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/add-service',
        name: 'Add Service',
        component: AddService
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})


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

BUT best practise is to use an external router/index.js file to declare all your routes and import to the index.js(main app file) and use it when you declare new Vue instance.

After that you can have router-link in your code as

<router-link to="path">

or navigate programmaticaly with

this.$router.push({ name: AddService })

or

this.$router.push({ path: '/' })

Collectives™ on Stack Overflow

Routing between two components in Vue.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related