## 基本用法1 用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你把 vue-router 添加进来，Vue-router的基本作用就是将每个路径映射到对应的组件，并通过修改路由进行组件间的切换。 ### 第一个单页面应用 现在我们以一个简单的单页面应用开启vue-router之旅，这个单页面应用有3个路径：/home 、list，/about，与这两个路径对应的是3个组件Home、List和About。  **HTML** >[info]1.首先引入vue.js和vue-router.js： ~~~ <script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script> <script src="../lib/vue-router.js" type="text/javascript" charset="utf-8"></script> ~~~ >[info]2.使用 使用 router-link 组件来导航. ~~~ <ul class="nav navbar-nav"> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <li> <router-link to="/home" >Home</router-link></li> <li> <router-link to="/list" >List</router-link></li> <li> <router-link to="/about">About</router-link></li> </ul> ~~~ >[info]3.使用<router-view>标签 ~~~ <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> ~~~ **JavaScript** >[info]1.创建组件 在js中创建3个组件Home、List、About： - 创建组件 Home ~~~ var Home ={ template: `<div class="jumbotron"> <h1>{{msg}}</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div>`, data: function() { return { msg: 'Hello, vue router!' } } } ~~~ - 创建组件 List ~~~ var List ={ template: `<div class="list-group"> <a href="#" class="list-group-item" v-for="item in msg"> {{item.title}} </a> </div>`, data: function() { return { msg:[ {title:'Dapibus ac facilisis in'}, {title:'Morbi leo risus'}, {title:'Porta ac consectetur ac'}, {title:'Vestibulum at eros'}, {title:'Cras justo odio'}, ] } } } ~~~ - 创建组件 About ~~~ var About = { template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>' } ~~~ >[info]2.定义路由,每个路由应该映射一个组件。 ~~~ const routes = [ { path: '/home', component: Home }, { path: '/list', component: List }, { path: '/about', component: About } ] ~~~ >[info] 3.创建 router 实例，然后传 `routes` 配置 ~~~ const router = new VueRouter({ routes // （缩写）相当于 routes: routes }) ~~~ >[info]4.创建和挂载根实例。 记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能 ~~~ const app = new Vue({ router }).$mount('#app') ~~~ 现在，应用已经启动了！  ------- >[success]预览：http://vue.taoge1024.com/Vue-router/01/router01.html git地址： ----------------------- >[danger]上述代码在浏览器打开时，内容区域为空，只有点击切换的时候才有内容，是因为我们没有定义默认路由，定义默认路由，同样比较简单，只需要在映射路由时，指定一个根目录，指定要显示哪个组件。 ~~~ const routes = [ { path: '/', component: Home },//指定默认进来的组件 { path: '/home', component: Home }, { path: '/list', component: List }, { path: '/about', component: About } ] ~~~ ------------------- >[success]预览：http://vue.taoge1024.com/Vue-router/01/router02.html git地址：