在项目中，将vue的单页面应用程序改为了多页面应用程序，因此在某些场景下，需要频繁的切换两个页面，因此考虑使用路由，这样会减少服务器请求。

使用vue-cli（vue脚手架）快速搭建一个项目的模板（webpack-simple）,运行起来后，将原来index.html页面挂载点中的内容删除

index.html 

 

    
     
     
      	
      home
     
        	
      game
     
     
     
    

router-link会被默认渲染成一个a标签，如下图

 

main.js，定义路由时，将每个路由映射到组件，路由其实也就是引入组件

 

import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)//引入两个组件import home from "./home.vue"import game from "./game.vue"//定义路由，将每个路由映射到组件const routes = [   { path: "/home", component: home},   { path: "/game", component: game},]//创建路由实例const router = new VueRouter({routes})new Vue({   el: '#app',   data: {   },   methods: {   },   router})

 

home.vue

 

game.vue

 

 

点击 home 或者 game 按钮时，就会显示相应的内容，如下图：