网站建设介绍ppt,phpcms网站打开空白,wordpress自定义文章代码和样式,什么是前端开发技术本人在B站上关于vue3的尚硅谷的课程#xff0c;以下是整理一些笔记。 一.路由器和路由的概念
在 Vue 3 中#xff0c;路由#xff08;Router#xff09;和路由器#xff08;Router#xff09;是两个相关但不同的概念。
1. 路由#xff08;Router#xff09;#xff…本人在B站上关于vue3的尚硅谷的课程以下是整理一些笔记。 一.路由器和路由的概念
在 Vue 3 中路由Router和路由器Router是两个相关但不同的概念。
1. 路由Router 路由是指定义在 Vue 应用程序中的不同页面或视图之间的映射关系。每个路由对应着一个特定的 URL当用户在应用程序中导航到不同的 URL 时路由会告诉 Vue 哪个组件应该渲染到页面上。路由定义了应用程序的不同页面状态和导航逻辑。
2. 路由器Router 路由器是一个 Vue 插件它提供了在应用程序中使用路由的功能。Vue Router 是 Vue 官方提供的路由器实现它允许你在 Vue 应用程序中构建 SPA单页应用程序并进行客户端路由。路由器负责解析 URL根据路由配置将不同的组件渲染到正确的位置并处理应用程序的导航。
通俗点解释
路由器就像是一个导航系统负责根据不同的网址告诉网站要显示哪个页面。它会监听浏览器的地址栏变化一旦检测到地址发生改变就会根据配置的路由规则找到对应的页面并将其渲染到浏览器中。
总结来说路由就是网站的不同页面而路由器就是负责管理这些页面的工具。路由器根据地址栏中的网址来确定要显示的页面并确保正确地加载和切换页面内容。 该图来源尚硅谷 一个路由器有多个路由
下图只是举例子解释不是这种路由器 二.制定导航区展示区。
1.在src文件中定义components文件夹
2.在此文件夹定义三个组件About.vueHome.vue,News.vue Header.vue只是起一个标题的作用没有也可以。 以下是组件的源码 About.vue
templatediv classabouth2大家好欢迎来到小李同学的博客/h2/div/templatescript setup langts nameAboutimport {onMounted,onUnmounted} from vueonMounted((){console.log(About组件挂载了)})onUnmounted((){console.log(About组件卸载了)})/scriptstyle scoped.about {display: flex;justify-content: center;align-items: center;height: 100%;color: rgb(85, 84, 84);font-size: 18px;}/style Home.vue
templatediv classhomeimg srchttp://www.atguigu.com/images/index_new/logo.png alt/div/templatescript setup langts nameHome/scriptstyle scoped.home {display: flex;justify-content: center;align-items: center;height: 100%;}/style News.vue
templatediv classnewsullia href#新闻001/a/lilia href#新闻002/a/lilia href#新闻003/a/lilia href#新闻004/a/li/ul/div/templatescript setup langts nameNews/scriptstyle 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 lia {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 Header.vue
templateh2 classtitleVue路由测试/h2/templatescript setup langts nameHeader/scriptstyle scoped.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;}/style 三.制定路由器
1.在src文件中新建好router路由器文件夹
2.在文件夹中建立index.ts文件
3.在index.ts文件里面制定路由规则 index.ts
//创建一个路由器并暴露出去//第一步引入creatRouter
import{createRouter,createWebHistory} fromvue-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//定义好后暴露出去router
createRouter: Vue Router 提供的一个函数用于创建路由器实例。 createWebHistory createWebHistory 是一个用于创建基于 HTML5 History 模式的路由历史记录管理器的函数它在 Vue Router 中用于配置路由器的工作模式。 代码解析 引入了 createRouter 和 createWebHistory 方法这两个方法是从 vue-router 包中导入的。这些方法将用于创建路由器实例和指定路由器的工作模式。 引入要呈现的组件包括 Home、About 和 News 组件。这些组件将在不同的路由下进行渲染。 使用 createRouter 方法创建了一个路由器实例并传入了一个配置对象作为参数。配置对象中的 history 属性使用了 createWebHistory() 在配置对象的 routes 属性中定义一系列的路由规则。每个路由规则都是一个对象包含了 path 和 component 属性。path 表示要匹配的 URL 路径component 表示该路由对应的组件。 最后通过 export default router 将定义好的路由器实例暴露出去以便在其他地方使用。一定要暴露否则等于没写 四.路由器在App.vue组件中使用
!-- App.vue 有三种标签html(结构标签) script(交互标签) style(样式用于好看) --templatediv class appHeader/!-- 导航区 --div class navigateRouterLink to /homeactive-classactive 首页/RouterLinkRouterLink to /newsactive-classactive 新闻/RouterLinkRouterLink to /aboutactive-classactive 关于/RouterLink/div!-- 展示区 --div class main-contentRouterView/RouterView/div/div/templatescript langts setup name Appimport { RouterView,RouterLink} from vue-router;
import Header from ./components/Header.vue/script
style/* App */.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
RouterView 组件是 Vue Router 提供的一个用于动态渲染路由组件的组件。 例如当路由路径为 /home 时路由器配置中定义的路由规则将 Home 组件渲染到 div classmain-content 内部。同样的当路由路径为 /news 时会渲染 News 组件当路由路径为 /about 时会渲染 About 组件。 active-class 通过 RouterLink你可以在应用程序中创建导航链接使用户能够点击链接并导航到不同的路由。 代码解析
template标签用于定义组件的结构部分也就是 HTML 部分。在这个例子中template 中包含了整个组件的结构包括一个 div 元素作为根容器其中包含了一个名为 Header 的组件、导航区域和展示区域。
script标签用于定义组件的交互部分也就是 JavaScript 部分。在这个例子中script中使用了 import语句引入了 RouterView 和 RouterLink 组件这是来自 Vue Router 的组件。同时还引入了一个名为 Header的组件。
style标签用于定义组件的样式部分也就是 CSS 部分。在这个例子中style 中定义了一些样式规则包括导航区域和展示区域的样式。
五.展示路由
在导航区点击首页路由器会找到/home的路由并把它渲染到展示区。 在导航区点击新闻路由器会找到/news的路由并把它渲染到展示区。 在导航区点击关于路由器会找到/about的路由并把它渲染到展示区。
