[Vuejs]-How do I link the route to the component using vue-router?

by

0👍

✅

I think you can also try as below. It’s works, just try it! You can add mode: 'hash', to give default # in all urls.

import Vue from 'vue';
import Router from 'vue-router'
import Hello from '../components/Hello.vue'
import First from '../components/firstPage.vue'
import Login from '../components/logIn.vue'

Vue.use(VueRouter);

const router = new VueRouter({
   mode: 'hash',
   base: '/your_base_name_if_you_want',
   linkActiveClass: 'active-tab', //if you w
   routes: [
    {
        path: '/',
        redirect: '/if_you_want_to_redirect',
        name: 'Login',  //Whatever
        component: {
            render (c) { return c('router-view'); }
        },

        children: [
            {
                path: '/',
                component: Login
                name: 'Login',
                meta: { title: 'Your title name' }
            },
            {
                path:'/first',
                component:Hello
                name: 'Hello',
                meta: { title: 'Your title name' }
            }
        ]
    }
]
})

export default router

You can also remove it from your urls using:

var router = new VueRouter({
    history: true
});

Hope this helps you!

0👍

The default mode for vue-router is hash mode

This is why you can’t get the ‘Hello’ component when your url is ‘/first’. Instead you can try input ‘/#/first’.
If you want to use history mode like ‘/first’, set the mode attribute for your route object like this.

const router = new Router({
  mode: 'history',
  routes
})

Hope it helps you.

Leave a comment