利用vue

利用vue

二级菜单导航是一种很普遍的功能，一般网页都会有这个功能。如果是平常的做法就是改变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: '

var router = new VueRouter({

routes: [

{path: '/', component: Home},

{path: '/picture', component: Picture},

{path: '/music', componenthttp://: Music},

{path: '/article', component: Artlist},

{path: '/article/:id', component: Article}

]

})

new Vue({

el: http://"#app",

router: router

})

切换到了文章部分时，我又弄了个文章列表，点击文章标题才进入文章内容。

这里我写死了数据，实际可以通过ajax拿到数据赋值。

我模拟了loading…，根据数据驱动的思维，通过v-if="loading"来判断这个loading是否出现。

动画切换记得要指定不同的key，不然是没有效果的。

创建和改变路由的时候，都要通过传递url的参数去一个方法拿到数据，这里就要created和watch '$route'

拿url参数是通过$route.params或$route.query等，具体看教程

返回上一级是用router.go(-1)，相当于按退回按钮

var Article = {

template: '

\

返回\

{{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前端组件学习教程》，欢迎大家学习阅读。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。