router-link和v-for联合使用遇到的问题解决以及组件的data属性必须return

前言

对于熟悉后端开发者来说，建议还是使用后端进行路由，对于前端不是很熟悉的人来说还是不要使用webpack。

在编写网站的时候，vue通过src的方式进行引入开发，写起来很顺手。

(1)从代码看问题

<template>
    <!-- 底部开始 -->
    <div class="footer">
        <ul>
            <li v-for="item in footerlist" :key="item.url">
                <router-link to="item.url">{{ item.content }}</router-link>
            </li>

        </ul>
    </div>
    <!-- 底部结束 -->
</template>

<script>
    // 因为是个组件，所以需要data形式return 出去
    export default {
        name: "footer",
        data(){
            return {
                footerlist: [
                    {content: '首页', url: "/home"},
                    {content: '关于我们', url: "/about"},
                    {content: '帮助中心', url: "/contact"},
                    {content: 'xx技术有限公司版权所有', url: "/home"},
                    {content: '粤ICP备19081537号', url: "https://beian.miit.gov.cn"},
                ]
            }
        }

    }
</script>

<style scoped>
    .footer{
        width: 100%;
        height: 60px;
        background: #f5f5f5;
        border-top: 1px solid #ccc;
        bottom: 0px;
        position: absolute;
        /* position: absolute;
        bottom: 0; */
    }
    .footer ul{
        padding: 0;
        width: 1000px;
        margin: 0 auto;
        height: 100%;
    }
    .footer ul li{
        line-height: 60px;
        float: left;
        color: #999;
        list-style: none;
    }
    .footer ul li a{
        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px;
    }
</style>

结果发现router-view并没有渲染。并且我发现把router-link里面的to写死，即to="/home"或者to="/overview"就能够渲染，但这并不是我想得到的效果。

查阅官网后得到解决方案：https://router.vuejs.org/zh/api/#to

首先，我们需要把to改成:to即v-bind:to的缩写，然后可以根据path或name来进行设置。下面给出代码示例：

<template>
    <!-- 底部开始 -->
    <div class="footer">
        <ul>
            <li v-for="item in footerlist" :key="item.url">
                <router-link :to="item.url">{{ item.content }}</router-link>
            </li>

        </ul>
    </div>
    <!-- 底部结束 -->
</template>

（2）还要个要注意的组件的data属性

当我们用webpack进行开发的时候是单页面的形式，所以在导出组件的时候，data属性必须以函数的形式return出去。如果是通过src方式直接使用官网的例子即可。

<script>
    // 因为是个组件，所以需要data形式return 出去
    export default {
        name: "footer",
        data(){
            return {
                footerlist: [
                    {content: '首页', url: "/home"},
                    {content: '关于我们', url: "/about"},
                    {content: '帮助中心', url: "/contact"},
                    {content: 'xx技术有限公司版权所有', url: "/home"},
                    {content: '粤ICP备19081537号', url: "https://beian.miit.gov.cn"},
                ]
            }
        }

    }
</script>