一,vue-router基本认识
1,什么是vue-router
适用于vue的路由技术,
路由:当我们访问某个路径的时候,路由会将我们引导至响应的组件(一个小的HTML结构)。
路由器:当我们访问www.jd.com的时候,是经过多个路由器转发之后,
将我们的请求送达到北京的某个服务器去,并获取到资源之后,拿回来展示在我们的浏览器上
音译,意译
2,为什么要使用vue-router
大型SPA(单页面应用)项目中,会出现很多组件,
并需要在不同情况下,针对不同的需求从一个组件切换到另外一个组件的时候,
使用vue-router会极大方便我们控制整个切换流程
。
3,如何使用vue-router?
二,vue-router使用流程
1,引入vue.js与vue-router.js核心文件 。
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
2,给定若干导航菜单,用以触发路由
。
通过
<ul class="nav">
<li>
<router-link to="/one">首页</router-link>
</li>
<li>
<router-link to="/two">产品</router-link>
</li>
<li>
<router-link to="/three">联系</router-link>
</li>
</ul>
3,初始化一个路由对象var router = new VueRouter(),并对路由对象做指定配置。
var router = new VueRouter({
routes:[
{
path:'/one',
component:{
template:'<div>我是首页one组件</div>'
}
},
{
path:'/two',
component:{
template:'<div>我是产品two组件</div>'
}
},
{
path:'/three',
component:{
template:'<div>我是联系three组件</div>'
}
}
]
})
4,将router对象注入到Vue对象下 。
new Vue({
el:"#app",
router:router
})
5,使用
<div id="app">
<ul class="nav">
<li>
<router-link to="/one">首页</router-link>
</li>
<li>
<router-link to="/two">产品</router-link>
</li>
<li>
<router-link to="/three">联系</router-link>
</li>
</ul>
<router-view></router-view>
</div>