Vue no incorpora un sistema de rutas por defecto como Angular, sin embargo es muy sencillo de instalar mediante npm.

Instalar paquete de rutas en Vue

npm install --save vue-router

Crear rutas en Vue (main.js)

Las rutas se crean mediante un array de objetos indicando la ruta y el componente y a continuación, se crea un nuevo objeto de rutas incluyendo dicho array.

const routes = [
    {path: [ruta1], component: [Componente1]},
    {path: [ruta2], component: [Componente2]},
    ...
];
const router = new VueRouter({
    routes,
    mode: 'history'
})

Para activar las rutas creadas de forma global se incluye en el objeto Vue del archivo main.js, habiendo antes importado todos los componentes requeridos, incluyendo la declaración del paquete anteriormente instalado.

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
import HomeComponent from './components/HomeComponent.vue';
import MiComponente from './components/MiComponente';
Vue.config.productionTip = false
Vue.use(VueRouter);
const routes = [
	{path:'/home',component: HomeComponent},
	{path:'/mi-componente', component: MiComponente}
];
const router = new VueRouter({
    routes,
    mode: 'history'
});
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Es conveniente especificar que si se asigna un nombre distinto de router al objeto VueRouter no podrá ser simplificado y por tanto será necesario incluir la propiedad y el valor.

const myRouter = new VueRouter({
    routes,
    mode: 'history'
});
new Vue({
  router: myRouter,
  render: h => h(App),
}).$mount('#app')

Finalmente se añade la etiqueta router-view en la vista del componente principal o se sustituye por los componentes añadidos de forma estática. De esta forma tan sencilla y con una etiqueta similar a la etiqueta router-outlet de Angular se cargan los distintos componentes sin necesidad de recargar toda la página.

<template>
  <div id="app">
    <Header></Header>    
    <!--<HomeComponent></HomeComponent>-->
    <!--<MiComponente></MiComponente>-->
    <router-view></router-view>
    <Footer></Footer>
  </div>
</template>

Añadir parámetros en las rutas

Los parámetros de una ruta se separan con barra ( / ) y deben ir precedidos del signo de dos puntos ( : ). Para indicar que el parámetro de una ruta sea opcional debe ir seguido del signo de interrogante ( ? ).

...
{path: '/editar/:id', component: EditUsuario },
{path: '/mi-componente/:id?',name:'mi-componente', component: MiComponente },
...

Capturar parámetros de la url

Para capturar un parámetro desde un componente se genera mediante la propiedad params del objeto route indicando el nombre del parámetro.

<script>
export default {
    name: 'MiComponente',
    miParametro: null,
    mounted(){
        this.miParametro = this.$route.params.id;
    } 
}
script>

Crear enlace en la vista de un componente

Los enlaces se manejan con la etiqueta router-link y el atributo o directiva to y pueden redirigir a una ruta simple o una ruta con parámetros.

• Enlace de ruta simple mediante atributo

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

• Enlace de ruta con parámetros mediante atributo

<router-link to="/mi-componente/10">MiComponente</router-link>

• Enlace de ruta mediante directiva

<router-link :to="{name:'mi-componente',params:{id:'10'}}">MiComponente</router-link>