利用vue-router实现二级菜单内容转换

二级菜单导航是一种很普遍的功能,一般网页都会有这个功能。如果是平常的做法就是改变url,跳到相应的页面;还有一种就是frame。
如果用vue的话,可以用vue-router改变里面的组件,这样就能做到不刷新页面都能跳到相应“页面”。其实url地址还是变了,但是他没有刷新页面其他位置的内容,只是改变了里面的组件,渲染了新的组件。
在线demo:http://runjs.cn/code/9th3cgxo

html

使用 Vue.js 时,我们就已经把组件组合成一个应用了,当你要把 vue-router 加进来,只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染它们。

  • 首页
  • 文章
  • 图片
  • 音乐

js

定义路由。每个路由应该映射一个组件。 其中”component” 可以是组件等。 创建和挂载根实例。记得要通过 router 配置参数注入路由,从而让整个应用都有路由功能

var Home = {template: '
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的参数去一个方法拿到数据,这里就要createdwatch '$route'
  • 拿url参数是通过$route.params或$route.query等,具体看教程
  • 返回上一级是用router.go(-1),相当于按退回按钮
var Article = {
 template: '
\
loading.....
\ \
\ \

{{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); } } }

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(利用vue-router实现二级菜单内容转换)