在我们平时工作中，我们有时候会有需求，按照不同的规则，加载不同的组件，页面不去跳转，常见的操作是ajax的异步操作，实现局部刷新加载新数据
在vue中，我们写了很多不同的组件，这时候，实现不刷新调用新组件，vue为我们提供了非常好用的一个插件，那就是路由
vue-router
我们首先去安装路由
在工具管理器里面我们直接敲命令
npm install vue-router --save
有些同学可能一开始不知道npm是什么东西，那么我们可以去下载vue-router文件到页面中去，像jquery一样引进就可以
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">1</router-link>
<router-link to="/bar">2</router-link>
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</body>
<script>
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。
let routes=[
{
path:'/foo',
component:Foo
},
{
path:'/bar',
component:Bar
}
]
// 3. 创建 router 实例，然后传 `routes` 配置
let router = new VueRouter({
routes
});
// 4. 创建和挂载根实例。
const app=new Vue({
router
}).$mount('#app');
</script>
</html>