Vue路由元信息

一直对Vue的路由一知半解,今天在做项目的时候,需要写一个面包屑的功能,层级不多只有二级,就想到了路由元信息这个东西了。其实,这个可以任意发挥了,我这里只是偷懒。

直接上代码吧:

const router = new VueRouter({
    linkActiveClass: 'active',
    routes: [
        {
            path: '/item1',
            name: '商品1',
            component: item1,
            meta:{
                title:'商品列表'
            }
        }
    ]
})

面包屑:

<div class="breadcrumb">
    <span>当前位置:</span>
    <span>{{this.$route.meta.title}}</span>
    <i class="el-icon-arrow-right"></i>
    <span>{{this.$route.name}}</span>
</div>

反正路由是自己定义的,这样的话,在定义路由的时候就把上一级给定义上。

另外,路由还可以传参数,如果二级导航里面有些需要跳转到查看某个详情,需要在路由里面传参数,然后在面包屑里面获取参数,这样就可以做出三级面包屑了,只不过这不是最优的结局方案,待我有更好的方案,我会继续补充。

标签: VUE

除单独说明外,文章默认采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。

添加新评论