|
二级菜单导航是一种很普遍的功能，一般网页都会有这个功能。如果是平常的做法就是改变url，跳到相应的页面；还有一种就是frame。
如果用vue的话，可以用vue-router改变里面的组件，这样就能做到不刷新页面都能跳到相应“页面”。其实url地址还是变了，但是他没有刷新页面其他位置的内容，只是改变了里面的组件，渲染了新的组件。
在线demo：
html
使用 Vue.js 时，我们就已经把组件组合成一个应用了，当你要把 vue-router 加进来，只需要配置组件和路由映射，然后告诉 vue-router 在哪里渲染它们。
js
定义路由。每个路由应该映射一个组件。 其中”component” 可以是组件等。 创建和挂载根实例。记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能
home '}
var router = new VueRouter({
routes: [
{path: '/',component: Home},{path: '/picture',component: Picture},{path: '/music',component: Music},{path: '/article',component: Artlist},{path: '/article/:id',component: Article}
]
})
new Vue({
el: "#app",router: router
})
切换到了文章部分时，我又弄了个文章列表，点击文章标题才进入文章内容。
- 这里我写死了数据，实际可以通过ajax拿到数据赋值。
- 我模拟了loading…，根据数据驱动的思维，通过v-if="loading"来判断这个loading是否出现。
- 动画切换记得要指定不同的key，不然是没有效果的。
- 创建和改变路由的时候，都要通过传递url的参数去一个方法拿到数据，这里就要
和watch '$route'
- 拿url参数是通过$route.params或$route.query等，具体看教程
- 返回上一级是用router.go(-1)，相当于按退回按钮
{{post.title}}
{{post.body}}
',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);
}
}
}
本文已被整理到了《》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
