利用vue-router实现二级菜单内容转换
二级菜单导航是一种很普遍的功能，一般网页都会有这个功能。如果是平常的做法就是改变url，跳到相应的页面；还有一种就是frame。
如果用vue的话，可以用vue-router改变<router-view>里面的组件，这样就能做到不刷新页面都能跳到相应“页面”。其实url地址还是变了，但是他没有刷新页面其他位置的内容，只是改变了<router-view>里面的组件，渲染了新的组件。
在线demo：http://runjs.cn/code/9th3cgxo
html
使用Vue.js时，我们就已经把组件组合成一个应用了，当你要把vue-router加进来，只需要配置组件和路由映射，然后告诉vue-router在哪里渲染它们。
<divid="app"> <divclass="leftBox"> <!--使用router-link组件来导航.--> <!--通过传入`to`属性指定链接.--> <!--<router-link>默认会被渲染成一个`<a>`标签--> <ul> <li><router-linkto="/"actived>首页</router-link></li> <li><router-linkto="/article">文章</router-link></li> <li><router-linkto="/picture">图片</router-link></li> <li><router-linkto="/music">音乐</router-link></li> </ul> </div> <divclass="rightBox"> <!--路由出口--> <!--路由匹配到的组件将渲染在这里--> <router-view></router-view> </div> </div>
js
定义路由。每个路由应该映射一个组件。其中”component”可以是组件等。创建和挂载根实例。记得要通过router配置参数注入路由，从而让整个应用都有路由功能
varHome={template:'<div>home</div>'}
varrouter=newVueRouter({
routes:[
{path:'/',component:Home},
{path:'/picture',component:Picture},
{path:'/music',component:Music},
{path:'/article',component:Artlist},
{path:'/article/:id',component:Article}
]
})
newVue({
el:"#app",
router:router
})
切换到了文章部分时，我又弄了个文章列表，点击文章标题才进入文章内容。
- 这里我写死了数据，实际可以通过ajax拿到数据赋值。
- 我模拟了loading…，根据数据驱动的思维，通过v-if="loading"来判断这个loading是否出现。
- 动画切换记得要指定不同的key，不然是没有效果的。
- 创建和改变路由的时候，都要通过传递url的参数去一个方法拿到数据，这里就要created和watch'$route'
- 拿url参数是通过$route.params或$route.query等，具体看教程
- 返回上一级是用router.go(-1)，相当于按退回按钮
varArticle={
template:'<divclass="post">\
<divclass="loading"v-if="loading">loading.....</div>\
<transitionname="slide">\
<divv-if="post"class="content":key="post.id">\
<button@click="back">返回</button>\
<p>{{post.title}}</p>\
<P>{{post.body}}</P>\
</div>\
</transition>\
</div>',
data:function(){
return{
loading:false,
error:null,
post:null
}
},
created:function(){
this.fetchData();
},
watch:{
'$route':'fetchData'
},
methods:{
fetchData:function(){
this.error=this.post=null;
this.loading=true;
getPost(this.$route.params.id,(err,post)=>{
this.loading=false;
if(err){
this.error=err.toString();
}else{
this.post=post
}
})
},
back:function(){
router.go(-1);
}
}
}
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。