VUE.JS ROUTING

npm install --save vue-router

install

import VueRouter from 'vue-router';
import {routes} from './routes';

Vue.use(VueRouter);

const router = new VueRouter({
    routes
});

new Vue({
    el: "#app",
    routes,
    render: h =>h(App)
});

main.js

import User from ".components/user/User.vue";
import Home from ".components/Home.vue";

routes.js

export const routes = [
    {
        path: '', 
        component: Home
    },
    {
        path: '/user', 
        component: User
    }
];

routes.js

<template>
    <h1>Routing</h1>
    <router-view name="header-top"></router-view>
    <router-view></router-view>
    <router-view name="header-bottom"></router-view>
</template>

<script>
    import Header from './components/Header.vue';
    export default {
        components: {
            appHeader: Header
        }
    }
</script>

<style>
</style>

App.vue

export const routes = [
    { 
        path: '', 
        name: 'home', 
        components: {
            default: Home,
            'header-top': HeaderStart
        }
    },
    {
        path: '/user', 
        component: User
    }
];

routes.js

export const routes = [
    { 
        path: '', 
        name: 'home', 
        components: {
            default: Home,
            'header-top': HeaderStart
        }
    },
    {
        path: '/user', 
        component: User
    },
    { 
        path: '/redirect-me', 
        redirect: {
            name: 'home'
        }
    }
];

routes.js

export const routes = [
    { 
        path: '', 
        name: 'home', 
        components: {
            default: Home,
            'header-top': HeaderStart
        }
    },
    {
        path: '/user', 
        component: User
    },
    { 
        path: '/redirect-me', 
        redirect: {
            name: 'home'
        }
    },
    {
        path: '*',
        redirect: '/'
    }
];

routes.js

<router-link to="home">Home</router-link>

<a href="home">Home</a>


<router-link :to="'home'">Home</router-link>


<router-link :to="{path: 'home'}">Home</router-link>


<router-link :to="{ 
    name: 'user', 
    params: {
        userId: 123
    }}">User</router-link>

<!-- with query, resulting in `/register?plan=private` -->
<router-link :to="{
    path: 'register',
    query: {
        plan: 'private'
    }}">Register</router-link>

markup

Danke