Vue初探(一)——vue-router

记录一下我在vue项目中经常用到的技巧，项目中踩的小坑和解决办法

使用vue-router中的meta，生成面包屑

首先在router.js路由文件中使用meta

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);
const router = new Router({
    mode: 'hash',
    routes: [
        {
            path: '/',
            component: resolve => import('@/components/index/index.vue'),
            name: 'index',
            meta: {
                breadCrumb: [
                    {
                        label: '首页',
                        path: '/'
                    }
                ]
            }
        },
        {
            path: '/article-detail/:id',
            component: resolve => import('@/components/ip/articleDetail.vue'),
            name: 'article-detail',
            meta: {
                breadCrumb: [
                    {
                        label: '首页',
                        path: '/'
                    },
                    {
                        label: '文章详情',
                        path: '/article-detail'
                    }
                ]
            }
        }
    ]
});

export default router;

使用resolve而非import可以拆分html，breadCrumb中的path是为了在面包屑组件中使用，让每个面包屑的路径都可以跳转（具体见step 3）

将router中的数据放入vuex

使用vuex-router-sync，就可以从vuex拿到route里meta的数据

npm install vuex-router-sync

在面包屑组件breadCrumb.vue里使用meta中的数据

<template>
    <div class="ip-breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
                v-for="item in breadCrumb"
                :key="item.label"
                :to="{ path: item.path }"
            >{{ item.label }}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
    computed: {
        ...mapState({
            breadCrumb: state => state.route.meta.breadCrumb || []
        })
    }
}
</script>

将meta中breadCrumb对象数组中的每一个对象，使用v-for循环拼接成面包屑即可。
(PS: 动态面包屑后续会补充。。。。动态面包屑指的是：首页>搜索文章“文章xxxx”)

vue-router中动态路由

router.js里路径中的/:id就是动态路由

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);
const router = new Router({
    mode: 'hash',
    routes: [
        {
            path: '/',
            component: resolve => import('@/components/index/index.vue'),
            name: 'index'
        },
        {
            path: '/ip-detail/:id',
            component: resolve => import('@/components/ip/ipDetail.vue'),
            name: 'ip-detail'  
        }
    ]
});

export default router;

再使用router-link跳转到某个具体的路由，如下

<el-table-column
    label="名称"
    width="90">
    <template slot-scope="scope">
        <router-link :to="{ path:`/article-detail/${scope.row.id}` }">
            {{ scope.row.title }}
        </router-link>
    </template>
</el-table-column>

path中使用了模版字符串的语法，${...}表示路由中的变量
(PS: el-table组件中Table-column Scoped Slot很有用，可以取到 { row, column, $index }，其中row包括了每行的数据，$index可以用作行号)

跳转到某个/:id后，需要向后端发送请求，请求该id下的相应资源，请求的url中需要包含当前路由中id的具体值，可以从当前组件的$route.params获取

<script>
import { get } from '@/utils/request.js'

export default {
    data () {
        return {
            id: this.$route.params.id,
        }
    },
    created () {
        this.fetchData()
    },
    methods: {
        fetchData() {
            get(`https://www.easy-mock.com/mock/59b92d75e0dc663341a8dbe4/example/data/${this.id}`)
        }
    }
}
</script>

Vue初探(一)——vue-router

推荐阅读更多精彩内容