LeJingS
3 months ago
parent
a411936548
commit
3557318194
@ -1,22 +1,73 @@
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script >
|
||||
import Person from './components/Person.vue'
|
||||
<script lang="ts" setup name="App">
|
||||
import { RouterView,RouterLink } from 'vue-router';
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
// 注册组件
|
||||
components: {
|
||||
Person
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<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>
|
||||
|
||||
@ -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