首先先了解一下Vue-router的作用:在web开发当中难免会有一种导航栏的效果,当点击某个内容的时候(或者改动了url的地址),会有一块布局去显示相应的内容。而router便有这样的效果,通过去检测url地址的变动,从而无刷新的去实现展示相对应的这块功能
先拿看看一下实现的代码
<body>
<div id="app">
<!-- 模拟点击的内容块,即点击不同的链接可以显示不同发内容块。
参数:/aindex表示的是显示的内容块(组件)所绑定的模板信息。为什么点击一个内容块就会显示
相应的内容块呢,其中必有关联,而参数正是构建了这一种关联
-->
<a href="#/aindex">评论</a>
<a href="#/bindex">关注</a>
<a href="#/cindex">私信</a>
<router-view></router-view> <!--定义显示内容块的视图,此时无法决定这个块内容放在哪里-->
</div>
<!--定义模板,注意在此标签下只能有一个跟结点,定义模板的好处就类似于定义了一个方法,提高了内容块的
复用率,大大减少了代码量,也提高了可读性
-->
<template id="tem1">
<div class="panel">推荐评论</div>
</template>
<template id="tem2">
<div class="panel">推荐关注</div>
</template>
<template id="tem3">
<div class="panel">我的私信</div>
</template>
<script>
//注册模板信息
var tem11 = {
template:"#tem1"
}
var tem22 = {
template:"#tem2"
}
var tem33 = {
template:"#tem3"
}
//绑定模板信息
Vue.component('aindex', tem11);
Vue.component('bindex', tem22);
Vue.component('cindex', tem33);
//指定路由规则,注意route routes router的区别,在routes当中,其放的是路由条目,
//是一个数组元素,里面放置的元素对象中包括:path:'url识别键',compoent:对应的内容块信息对象
var routeRules =new VueRouter({
routes: [
{ path:'/aindex',component: tem11 },
{ path:'/bindex',component: tem22 },
{ path:'/cindex',component: tem33 },
]
});
//实例化vue对象
var wm = new Vue({
el: '#app',
//路由规则注册到实例当中
router:routeRules
});
</script>
</body>
下面总结一下其用法:
1.引入vue.js 及vue-router.js文件,最好就是先测试一下引入的文件有没有问题(今天测试的时候出现VueRouter未定义的错误,排了半天的雷发现是引入的js文件有问题)
2.创建展示的内容块组件,即定义好模板。
3.定义路由规则,去指定哪个地址展示哪个模板(注意各个对象的区别)
4.在Vue实例化对象当中说明router属性 即router:路由规则对象
5.在vue的实例化对象当中去调用定义好的路由规则
ps:刚进行的小白,此文章的精准性有待提高,如果错误的地方望各位能够斧正,感谢各位。