<router-link>点击部分
<router-view>显示部分
<router-link>有一个重要的属性 to 定义了点击之后，去到那里。
<router-link to="/home"></router-link>
当用户点击<router-link>时，会去寻找他的to属性，它的to属性和router.js中配置的路径{path：‘/home’} path一一对应，从而找到匹配的组件，最后把组件渲染到<router-view>标签所在的位置。
①创建项目
在src下创建两个组件home.vue about.vue
②在App.vue中定义<router-link>和<router-view>
<template>
<div id="app">
<router-link to="/home"></router-link>
<router-link to="/about"></router-link>
<router-view></router-view>
</div>
</template>
③在scr目录下的router下的index.js 定义router
import vue from ‘vue‘; import VueRouter from ‘vue-router‘; import Home from ‘./home.vue‘; import About from ‘./about.vue‘; Vue.user(VueRouter); const routes[{ path:‘/home‘, name:Home, component:home children:[{ path:‘child‘, name:Child, component:child }] }, { path:‘/about‘, name:About, component:about }] const router=new VueRouter({ routes }) expoet default router;
④把路由注入到根实例中，启动路由 main.js
import Vue from ‘vue‘; import App from ‘./App.vue‘; //引入路由 import router from ‘../index.js‘; new Vue({ el:"#app", router }).$mount(‘#app‘)
原文：https://www.cnblogs.com/babilong/p/13617270.html