🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 基本用法1 用 Vue.js + vue-router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你把 vue-router 添加进来,Vue-router的基本作用就是将每个路径映射到对应的组件,并通过修改路由进行组件间的切换。 ### 第一个单页面应用 现在我们以一个简单的单页面应用开启vue-router之旅,这个单页面应用有3个路径:/home 、list,/about,与这两个路径对应的是3个组件Home、List和About。 ![](https://box.kancloud.cn/5cce201d2264d5ac82471b3874f67d17_512x346.png) **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') ~~~ 现在,应用已经启动了! ![](https://box.kancloud.cn/ca4c81655d24ed52b7fe048ef0a09f11_777x509.gif) ------- >[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地址: