在我们平时工作中，我们有时候会有需求，按照不同的规则，加载不同的组件，页面不去跳转，常见的操作是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>