前提：

项目由 vue-cli 脚手架创建。

首先，先下载 vue-router   

npm install vue-router

安装完成后，运行项目

npm run dev

打开 main.js ， 引入并使用 vue-router

import VueRouter from "vue-router"Vue.use(VueRouter)

引入创建好的组件

import Home from "./components/Home.vue"import News from "./components/News.vue"

配置路由： （{path: '*', redirect: '/home'}  // 此项表示，默认加载）

const routes = [  {path: '/home', component: Home},  {path: '/news', component: News},  {path: '*', redirect: '/home'}   /*默认跳转路由*/]

实例化 VueRouter

const router = new VueRouter({  　　routes     // routes : routes 的简写方式})

Vue实例中挂载路由：

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

此时，路由就已经配置好了，接下来，我们需要在 App.vue 中 引入

现在，我们就可以看到 Home 组件内容了，

再引入， router-link 设置路由导航，to 属性 指定链接

     
      主页
       
     
      新闻页
     

此时，一个简单的路由就搭建好了