为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
Vue.js

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

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的参数去一个方法拿到数据,这里就要createdwatch '$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);
        }
    }
}
点击查看更多内容
7人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
25
获赞与收藏
186

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消