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

二级菜单导航是一种很普遍的功能，一般网页都会有这个功能。如果是平常的做法就是改变url，跳到相应的页面；还有一种就是frame。
如果用vue的话，可以用vue-router改变<router-view>里面的组件，这样就能做到不刷新页面都能跳到相应“页面”。其实url地址还是变了，但是他没有刷新页面其他位置的内容，只是改变来源gao($daima.com搞@代@#码网了<router-view>里面的组件，渲染了新的组件。

html

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

<div id="app"> <div class="leftBox"> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <ul> <li><router-link to="/" actived>首页</router-link></li> <li><router-link to="/article">文章</router-link></li> <li><router-link to="/picture">图片</router-link></li> <li><router-link to="/music">音乐</router-link></li> </ul> </div> <div class="rightBox"> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div></div>

js

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

var Home = {template: '<div>home</div>'} 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的参数去一个方法拿到数据，这里就要created和watch '$route'

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

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

var Article = { template: '<div class="post">\ <div class="loading" v-if="loading">loading.....</div>\ <transition name="slide">\ <div v-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); } }}

喜欢 (0)赏

[搞代码]

分享 (0)