对路由route的理解
- 路由就是一组key-vaule的对应关系
- 多个路由,需要经过路由器处理
路由_基本切换效果
-
导航区、展示区
<template> <div class="app"> <h2 class="title">Vue路由测试</h2> <!-- 导航区 --> <div class="navigate"> <RouterLink to="/home" active-class="active">首页</RouterLink> <RouterLink to="/news" active-class="active">新闻</RouterLink> <RouterLink to="/about" active-class="active">关于</RouterLink> </div> <!-- 展示区 --> <div class="main-content"> <!-- 此处以后可能要展示各种组件,到底展示哪个组件,需要看路径 --> <RouterView></RouterView> </div> </div> </template> <script lang="ts" setup name="APP"> import {RouterView,RouterLink} from 'vue-router' </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.active { 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>
展示区必须:,不然无法看到页面
-
请来路由器
main.ts代码
//引入createApp用于创建应用
import { createApp } from "vue";
//引入App根组件
import App from './App.vue'
//引入路由器
import router from './router'
// createApp(App).mount('#app')
//创建一个应用
const app = createApp(App)
//使用路由器
app.use(router)
//挂载整个应用到app容器中
app.mount('#app')
-
指定路由规则的具体规则(什么路径,对应着什么组件)
新建一个router文件夹,index.ts
//创建一个路由器,并暴露出去 //第一步:引入createRounter import { createRouter, createWebHistory } from 'vue-router' //引入一个个可能要呈现的组件 import Home from '@/components/Home.vue' import News from '@/components/News.vue' import About from '@/components/About.vue' //第二步:创建路由器 const router = createRouter({ history: createWebHistory(), //路由器的工作模式 routes: [ //一个个路由 { path: '/home', component: Home }, { path: '/news', component: News }, { path: '/about', component: About } ] }) //暴露出去router export default router
-
形成一个【??.vue】
路由文件:Home.vue代码
<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>
- 注意
-
如果想要点击"首页"、“新闻”,切换路由页面,样式也跟着变化
active-class=“定义好的样式”
-
如果想要点击"首页",自动引入路由,不需要手动改变,
a标签——>RounterLink
<RouterLink to="/home" active-class="active">首页</RouterLink>
路由_两个注意点
-
路由组件通常放在pages或views文件夹,一般组件通常存放在components文件夹。
- 路由组件:靠路由的规则渲染出来的
- 一般组件:亲手写标签出来的
-
通过点击导航,视觉上“消失”了的路由组件,默认是被卸载的,需要的时候重新挂载。
验证:about.vue,只要点击"关于",就会重新挂载,点击其他,就会卸载
<template> <div class="about"> <h2>大家好,欢迎来到尚硅谷直播间</h2> </div> </template> <script setup lang="ts" name="About"> import { onMounted, onUnmounted } from 'vue' onMounted(() => { console.log('about组件挂载了'); }) onUnmounted(() => { console.log('about组件卸载了'); }) </script>
路由_路由器工作模式
-
history模式
优点:URL更加美观,不带有#,更接近传统网站URL;缺点:后期项目上线,需要服务端配合处理路径问题,否则刷新会有404错误。(不懂)
Vue2:mode:‘history’
Vue3:history:createWebHistory()
React:BrowserRouter
-
hash模式
优点:兼容性更好,不需要服务器处理路径问题;缺点:URL带有#不太美观,且在SEO优化方面性能较差。
//替换 router/index.ts里面路由工作模式 //第一步:引入createRounter import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router' //第二步:创建路由器 const router = createRouter({ history: createWebHashHistory(), //路由器的工作模式 // 网页路径改变:http://localhost:5173/#/ // history模式网页路径:http://localhost:5173/
路由_to的两种写法
第一种字符串写法:App.vue里面导航区
<div class="navigate">
<RouterLink to="/home" active-class="active">首页</RouterLink>
<RouterLink to="/news" active-class="active">新闻</RouterLink>
<RouterLink to="/about" active-class="active">关于</RouterLink>
</div>
第二种对象写法(path跳转):
<RouterLink :to="{path:'/about'}" active-class="active">关于</RouterLink>
路由_命名路由
router/index 可以给路由加上name
routes: [ //一个个路由
{
name: 'zhuye',
path: '/home',
component: Home
},
{
name: 'xinwen',
path: '/news',
component: News
},
{
name: 'guanyu',
path: '/about',
component: About
}
]
App.vue 对象name路由跳转:
<RouterLink :to="{name:'xinwen'}" active-class="active">新闻</RouterLink>
路由_嵌套路由
如何使得上述新闻的小li里面不是固定的,可以循环得到,News.vue
//key不能丢 v-for循环得到
<template>
<div class="news">
<ul>
<li v-for="news in newsList" :key="news.id">
<a href="#">{{news.title}}</a>
</li>
</ul>
</div>
</template>
<script setup lang="ts" name="News">
import { reactive } from 'vue'
const newsList = reactive([
{ id: '12345', title: '十种抗癌食物', content: '西兰花' },
{ id: '12346', title: '九种抗癌食物', content: '西兰花2' },
{ id: '12347', title: '八种抗癌食物', content: '西兰花3' },
{ id: '12348', title: '七种抗癌食物', content: '西兰花4' }
])
</script>
嵌套使用,点击不同新闻标题,就能获取不同新闻内容
components/Details.vue放置新闻详情
<template>
<ul class="news-list">
<li>编号:xxx</li>
<li>标题:xxx</li>
<li>内容:xxx</li>
</ul>
</template>
<script setup lang="ts" name="About">
</script>
<style scoped>
.news-list {
list-style: none;
padding-left: 20px;
}
.news-list>li {
line-height: 30px;
}
</style>
router/index.ts引入details.vue
import Details from '@/components/Details.vue'
{
name: 'xinwen',
path: '/news',
component: News,
children: [
{
path: 'detail',
component: Details
}
]
},
News.vue必须配置相关参数
RouterLink下面必须写详细路径 /news/detail 不然无法匹配到
<!-- 导航区 -->
<ul>
<li v-for="news in newsList" :key="news.id">
<RouterLink to="/news/detail">{{news.title}}</RouterLink>
</li>
</ul>
<!-- 展示区 -->
<div class="news-content">
<RouterView></RouterView>
</div>
import { RouterView,RouterLink } from 'vue-router';