vue简单路由（一）

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

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

index.html 

 

<div id="app">
<!-- 使用 router-link 组件来导航,通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/home">
 	<button>home</button>
</router-link>
<router-link to="/game">
   	<button>game</button>
</router-link>
<!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>

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

 

<template>
	<h3>首页</h3>
</template>

game.vue

<template>
	<h3>游戏</h3>
</template>

 

 

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