LeJingS
3 months ago
parent
a411936548
commit
3557318194
@ -1,22 +1,73 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div class="app">
|
||||||
|
<h2>Vue路由测试</h2>
|
||||||
|
<!-- 导航区 -->
|
||||||
|
<div class="navigate">
|
||||||
|
<RouterLink to="/home" calss="active">首页</RouterLink>
|
||||||
|
<RouterLink to="/news">新闻</RouterLink>
|
||||||
|
<RouterLink to="/about">关于</RouterLink>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 展示区 -->
|
||||||
|
<div class="main-content">
|
||||||
|
<!-- 此处展示 -->
|
||||||
|
<RouterView></RouterView>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
|
||||||
<Person></Person>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script >
|
<script lang="ts" setup name="App">
|
||||||
import Person from './components/Person.vue'
|
import { RouterView,RouterLink } from 'vue-router';
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'App',
|
|
||||||
// 注册组件
|
|
||||||
components: {
|
|
||||||
Person
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
/* App */
|
||||||
|
.title {
|
||||||
|
text-align: center;
|
||||||
|
word-spacing: 5px;
|
||||||
|
margin: 30px 0;
|
||||||
|
height: 70px;
|
||||||
|
line-height: 70px;
|
||||||
|
background-image: linear-gradient(45deg, gray, white);
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 0 2px;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
.navigate {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin: 0 100px;
|
||||||
|
}
|
||||||
|
.navigate a {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
width: 90px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: gray;
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 18px;
|
||||||
|
letter-spacing: 5px;
|
||||||
|
}
|
||||||
|
.navigate a.xiaozhupeiqi {
|
||||||
|
background-color: #64967E;
|
||||||
|
color: #ffc268;
|
||||||
|
font-weight: 900;
|
||||||
|
text-shadow: 0 0 1px black;
|
||||||
|
font-family: 微软雅黑;
|
||||||
|
}
|
||||||
|
.main-content {
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 30px;
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 90%;
|
||||||
|
height: 400px;
|
||||||
|
border: 1px solid;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -0,0 +1,18 @@
|
|||||||
|
<template>
|
||||||
|
<div class="home">
|
||||||
|
<img src="http://www.atguigu.com/images/index_new/logo.png" alt="">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="Home">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.home {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div class="news">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">新闻001</a></li>
|
||||||
|
<li><a href="#">新闻002</a></li>
|
||||||
|
<li><a href="#">新闻003</a></li>
|
||||||
|
<li><a href="#">新闻004</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="News">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 新闻 */
|
||||||
|
.news {
|
||||||
|
padding: 0 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.news ul {
|
||||||
|
margin-top: 30px;
|
||||||
|
list-style: none;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
.news li>a {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 40px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #64967E;
|
||||||
|
text-shadow: 0 0 1px rgb(0, 84, 0);
|
||||||
|
}
|
||||||
|
.news-content {
|
||||||
|
width: 70%;
|
||||||
|
height: 90%;
|
||||||
|
border: 1px solid;
|
||||||
|
margin-top: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
// 创建一个路由器，暴露出去
|
||||||
|
// 导入路由组件
|
||||||
|
import { createRouter, createWebHashHistory,createWebHistory } from 'vue-router'
|
||||||
|
//引入每个可能要呈现的组件
|
||||||
|
import Home from '@/components/Home.vue'
|
||||||
|
import About from '@/components/About.vue'
|
||||||
|
import News from '@/components/News.vue'
|
||||||
|
|
||||||
|
// 创建路由
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
// 路由模式
|
||||||
|
history:createWebHistory(),
|
||||||
|
routes:[
|
||||||
|
// 路由配置规则
|
||||||
|
{
|
||||||
|
path:'/home',
|
||||||
|
component:Home
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path:'/about',
|
||||||
|
component:About
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path:'/news',
|
||||||
|
component:News
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
// 暴露出去
|
||||||
|
export default router
|
||||||
Loading…
Reference in new issue