vue-router路由_根据cnode.js接口实现其页面样式

最新推荐文章于 2023-11-18 15:30:00 发布

本地是好的

最新推荐文章于 2023-11-18 15:30:00 发布

阅读量197

点赞数

分类专栏： vue_实例

本文链接：https://blog.csdn.net/qq_40958876/article/details/97893302

版权

vue_实例专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body,
        p,
        h1,
        h2,
        h3 {
            margin: 0;
            font-weight: normal;
        }

        ul {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .item {
            display: flex;
            align-items: center;
            padding: 10px;
        }

        .avatar {
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }

        .topic {
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .topic .topic-body {
            display: flex;
            justify-content: space-between;
        }

        .topic-title {
            color: #333;
            font-size: 14px;
        }

        .count {
            font-size: 12px;
        }

        .count span:first-child {
            color: #9e78c0;
        }

        .count span:last-child {
            color: #b4b4b4;
        }

        time {
            font-size: 12px;
            color: #778087;
        }

        .title {
            background-color: #eeeeee;
            font-size: 16px;
            line-height: 40px;
            text-align: center;
        }

        .title a {
            text-decoration: none;
            padding: 0 10px;
        }

        .list {
            width: 1200px;
            margin: 0 auto;
        }

        .router-link-exact-active {
            background-color: orangered;
            color: #fff;
            padding: 0 2px;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <!-- 
    在组件中获取url里的query参数
      this.$route.query.tab

    拿个这个参数请求数据
      axios.get(url, {
        params: {
          tab
        }
      })

    请求到的数据设置给组件的topics
      this.topics = res.data.data

    
    设置好对应的路由
    const routes = [
      {
        path: '/',
        component: Index
      }
    ]

    把路由配置加到Router

    const router = new VueRouter({
      routes
    })

    把router加入到new Vue
    new Vue({
      el: "#app",
      router
    })


    所有链接应该用 router-link表示。对应跳转的地址用 to表示



   -->
    <div id="app">
        <nav class="title">
            <router-link to="/?tab=all">全部</router-link>
            <router-link to="/?tab=good">精华</router-link>
            <router-link to="/?tab=share">分享</router-link>
            <router-link to="/?tab=ask">问答</router-link>
            <router-link to="/?tab=job">招聘</router-link>
        </nav>
        <div class="list">
            <!-- keep-alive用于保持组件不会被销毁，防止重复请求 -->
            <keep-alive>
                <ul>
                    <!-- 实现key为惟一值，组件created就会多次执行 -->
                    <router-view :key="$route.fullPath"></router-view>
                </ul>
            </keep-alive>

        </div>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script src="./axios.js"></script>
    <script>
        const Loading = {
            template: `
    <div>正在加载中···</div>
    `
        }
        Vue.component('Loading', Loading)
        const Index = {
            template: `
            <div>
            <li>
            <Loading v-if="show"></Loading>
        </li>
        <li v-for="topic in topics" class="item">
                <div class="avatar">
          <img width="100%" :src="topic.author.avatar_url" :title="topic.author.loginname" alt="">
        </div>
        <!-- <span>问答</span> -->
        <div class="topic">
          <h3 class="topic-title">{{topic.title}}</h3>
          <div class="topic-body">
            <div class="count">
              <span>{{topic.reply_count}}</span>/<span>{{topic.visit_count}}</span>
            </div>
            <time>{{topic.last_reply_at | formatDate}}</time>
          </div>
        </div>
        </li>
            </div>`,
            data() {
                return {
                    topics: [],
                    show: true
                }
            },
            // 过滤日期为几分钟前
            filters: {

                formatDate(value) {
                    // console.log(value)
                    // const d = new Date(value)

                    // return d.getFullYear() + '/' + (d.getMonth() + 1) + "/" + d.getDate()
                    // 1分钟等于多少毫秒
                    const
                        s = 1000,
                        m = s * 60,
                        h = 60 * m,
                        d = 24 * h,
                        month = 30 * d
                    y = 365 * d

                    // console.log(s, m, h, d)
                    const time = Date.now() - new Date(value)
                    const arr = [y, month, d, h, m, s]
                    const arr2 = ['年', '月', '天', '小时', '分钟', '秒']

                    for (let i = 0; i < arr.length; i++) {
                        if (time / arr[i] > 1) {
                            return Math.floor(time / arr[i]) + arr2[i] + '前'
                        }
                    }
                }
            },
            created() {
                // {{$route.query.tab}}获取对应的参数?tab=xxx
                // console.log(this.$route.query.tab);
                // console.log(this.$route);//fallpath
                const tab = this.$route.query.tab
                this.show = true

                // 发起请求
                axios.get('https://cnodejs.org/api/v1/topics', {
                    params: {
                        // tab:tab
                        tab
                    }
                }).then(res => {
                    // console.log(res.data.data[0].last_reply_at),
                    this.topics = res.data.data
                    this.show = false
                })

            }
        }

        const routes = [
            {
                path: '/',
                component: Index
            }
        ]

        const router = new VueRouter({
            routes
        })
        const app = new Vue({
            el: '#app',

            router

        })

    </script>
</body>

</html>

本地是好的

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue-router路由_根据cnode.js接口实现其页面样式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
复制链接

扫一扫