crt_a_page_and_add_to_vue_router

创建一个页面并加入vue路由器

本项目的vue页面全部存放在/src/pages/目录下
打开该目录 你可以看到目前有四个vue页面

Name	Last commit message	Last commit date
404.vue	initial commit	17 hours ago
About.vue	initial commit	17 hours ago
Home.vue	🐞 fix: news bg color	16 hours ago
Member.vue	initial commit	17 hours ago

假设我们要创建一个名为LateDream的页面
我们就可以在该目录下新建一个名为LateDream.vue的文件

<script setup>
import {ref, onBeforeMount} from 'vue';

const rss = ref([]);
onBeforeMount(async() => {
	const res = await fetch('https://latedream.us.kg/rss/20250117.json'); // 这个文件实际并不存在 假装它存在吧awa
	rss.value = await res.json(); // [{date:'2025-01-01', title:'新年快乐awa', author:'LateDream', url:'https://latedream.us.kg/posts/新年快乐awa/'}]
});

function getLastSite() {
  if(!!document.referrer) {
    return new URL(document.referrer).host;
  } return false;
}

function openLink(url) {
  window.open(url, 'noopener,noreferrer');
}
</script>

<template>
  <div id="main">
    <div class="title">欢迎!</div>
    <div class="content">
      <p>{{getLastSite()? `来自 ${getLastSite()} 的朋友`: '朋友'}}, 欢迎访问我的页面</p>
      <p class="loading" v-show="rss.length === 0">Loading...</p>
      <div class="posts" v-show="rss.length > 0">
        <div class="cards" v-for="post in rss" @click="openLink(post.url)">
          <div class="name">{{post.title}}({{post.author}})</div>
          <div class="role">{{post.date}}</div>
          <!-- 没错 我直接套用的成员列表的样式awa -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LateDream'
}
</script>

现在我们把它加入到路由表中awa

const routes = [
	{path: '/', component: () => import('@pages/Home.vue')},
	{path: '/about', component: () => import('@pages/About.vue')},
	{path: '/member', component: () => import('@pages/Member.vue')},
	{path: '/:pathMatch(.*)*', redirect: '/404'},
-	{path: '/404', component: () => import('@pages/404.vue')}
+	{path: '/404', component: () => import('@pages/404.vue')},
+	{path: '/LateDream', component: () => import('@pages/LateDream.vue')}
];

大功告成 现在访问localhost:5137/LateDream就能看到对应的页面啦

注意事项