企业官网建设流程全解析

福建省建设职业注册资格管理中心网站,网站设计超链接怎么做,长沙市住房和城乡建设局,wordpress frontopen2文章目录 Ⅰ. 基本介绍一、单页应用程序介绍1. 概念2. 具体示例3. 单页应用 vs 多页应用 二、路由介绍1. 路由的介绍2. 如何实现路由3. 什么是vue-router 三、组件存放目录1. 组件分类2. 存放目录 Ⅱ. 基本使用和模块封装一、基本使用(42)1. 四个固定步骤2. 两个核心步骤3. 路由…文章目录Ⅰ. 基本介绍一、单页应用程序介绍1. 概念2. 具体示例3. 单页应用 vs 多页应用二、路由介绍1. 路由的介绍2. 如何实现路由3. 什么是vue-router三、组件存放目录1. 组件分类2. 存放目录Ⅱ. 基本使用和模块封装一、基本使用(42)1. 四个固定步骤2. 两个核心步骤3. 路由运作原理二、抽离封装路由模块1. 问题2. 目标3. 代码示例Ⅲ. 更多配置一、重定向1. 问题2. 解决方案3. 语法二、404页面1. 作用2. 语法① Vue Router 3Vue2 生态② Vue Router 4Vue3 生态两种语法的区别实例代码三、路由模式1. 问题2. 语法Ⅰ. 基本介绍一、单页应用程序介绍1. 概念单页应用程序SPASingle Page Application是指所有的功能都在一个HTML页面上实现。2. 具体示例单页应用网站网易云音乐 https://music.163.com/多页应用网站京东 https://jd.com/3. 单页应用 vs 多页应用单页应用类网站系统类网站/内部网站/文档类网站/移动端站点多页应用类网站公司官网/电商类网站二、路由介绍1. 路由的介绍生活中的路由设备和 ip 的映射关系Vue中的路由路径和组件的映射关系单页面应用程序之所以开发效率高性能好用户体验好最大的原因就是页面按需更新比如当点击【发现音乐】和【关注】时只是局部更新内容对于头部是不更新的要按需更新首先就需要明确访问路径和组件的对应关系那访问路径和页面的对应关系如何确定呢路由2. 如何实现路由使用 vue-router当修改地址栏路径时切换显示的组件即可。3. 什么是vue-routerVue Routervue-router是 Vue 官方的一个路由插件是一个第三方包三、组件存放目录1. 组件分类将.vue文件分为两类仅仅是为了便于理解和管理但二者本质无区别页面组件配合路由切换展示整个页面不复用的复用组件用于组装页面组件可复用的2. 存放目录页面组件 - 页面展示 - 配合路由使用 - 放置在src/views目录下复用组件 - 用于组装页面组件 - 放置在src/components目录下​Ⅱ. 基本使用和模块封装一、基本使用(42)1. 四个固定步骤下载VueRouter模块npminstallvue-router导入相关函数import{createRouter,createWebHashHistory}fromvue-router创建路由实例constroutercreateRouter({// 哈希模式, 路径带 #history:createWebHashHistory(),routes:[// 路由表规则, 即 path 与 component 的对应关系]})注册。将路由实例注册到应用中让规则生效app.use(router)当完以上四步之后就可以看到浏览器地址栏中的路径变成了/#/的形式。这表示项目的路由已经被Vue-Router管理了。2. 两个核心步骤views目录下创建需要的页面组件并配置路由规则views/Find.vue文件script setup/scripttemplatedivclassfindp发现音乐/pp发现音乐/pp发现音乐.../p/div/templatestyle scoped/styleviews/My.vue文件script setup/scripttemplatedivclassmyp我的音乐/pp我的音乐/pp我的音乐.../p/div/templatestyle scoped/styleviews/Friend.vue文件script setup/scripttemplatedivclassfriendp朋友/pp朋友/pp朋友.../p/div/templatestyle scoped/stylemain.js文件// 导入两个相关函数// createRouter(): 创建路由实例// createWebHashHistory(): 创建哈希模式的路由, 路径带 #import{createRouter,createWebHashHistory}fromvue-router// 导入 3 个页面组件importFindfrom/views/Find.vueimportFriendfrom/views/Friend.vueimportMyfrom/views/My.vue// 创建路由实例constroutercreateRouter({history:createWebHashHistory(),routes:[{path:/find,component:Find},{path:/my,component:My},{path:/friend,component:Friend}]})// 注册app.use(router)给路由出口即路径匹配的组件要显示的位置App.vue文件script setup/scripttemplate!--路由出口--router-view//template3. 路由运作原理当浏览器url改变时匹配路由表数组中的path值如果命中了则把相应的component渲染到router-view /的位置否则显示空白。二、抽离封装路由模块1. 问题路由配置代码都写在main.js中合适吗显然不合适会让main.js代码变得臃肿。2. 目标将路由模块抽离出来。好处利于管理和维护3. 代码示例新建router/index.js文件import{createRouter,createWebHashHistory}fromvue-router// 注意: 脚手架环境下 代指 src 目录可以用于快速引入组件importFindfrom/views/Find.vueimportFriendfrom/views/Friend.vueimportMyfrom/views/My.vueconstroutercreateRouter({history:createWebHashHistory(),routes:[{path:/find,component:Find},{path:/my,component:My},{path:/friend,component:Friend}]})// 导出路由实例exportdefaultroutermain.js文件import{createApp}fromvueimportAppfrom./App.vue// 导入路由实例importrouterfrom./routerconstappcreateApp(App)// 注册app.use(router)app.mount(#app)Ⅲ. 更多配置一、重定向1. 问题在网页打开时url默认是/路径未匹配到组件时会出现空白内容如下所示2. 解决方案重定向匹配/后强制跳转到其它页面比如跳转到/find路径避免页面空白。3. 语法在创建路由createRouter()时候添加对/的重定向路径如下所示constroutercreateRouter({...routes:[// 访问 / , 自动跳转到 /find{path:/,redirect:/find},...]})二、404页面1. 作用当路径找不到匹配时给个提示页面.2. 语法① Vue Router 3Vue2 生态{path:*,component:_404}*通配符写法只能用在最后一条路由。匹配任意路径通常用于 404。缺点没法拿到具体被匹配的路径字符串。② Vue Router 4Vue3 生态{path:/:pathMatch(.*)*,component:NotFound}{path:/user-:afterUser(.*),component:UserGeneric}用正则样式的参数写法。/:pathMatch(.*)*表示 “匹配所有路径片段”结果会放在route.params.pathMatch里。/user-:afterUser(.*)表示匹配/user-xxx开头的路径并把xxx后面部分存在params.afterUser。:afterUser→ 这是一个动态路由参数名访问时的值会放到route.params.afterUser。(.*)→ 这是一个正则表达式约束参数可以匹配的内容。.表示任意字符*表示出现 0 次或多次所以(.*)就是 “匹配任意长度的字符串”优点更灵活可以在 404 页面显示 “你访问的路径是 xxx”。两种语法的区别path: *→ Vue Router 3 的老写法简单粗暴只能兜底。/:pathMatch(.*)*→ Vue Router 4 的推荐写法支持参数提取和更强的模式匹配。实例代码views/404.vue文件script setup/scripttemplatedivh3404/h3p你访问的页面去了月球/prouter-link to/去首页/router-link/div/templaterouter/index.js文件import_404from/views/404constroutercreateRouter({routes:[...{path:/:pathmatch(.*)*,component:_404}]})exportdefaultrouter三、路由模式1. 问题路由的路径看起来不好看开头有#能否切成真正路径形式hash路由默认例如http://localhost:5173/#/find不够美观history路由开发常用例如http://localhost:8080/find缺点是刷新或直接访问时会请求服务器需要后端配置history fallback2. 语法import{createRouter,createWebHashHistory,createWebHistory}fromvue-routerconstroutercreateRouter({// 历史模式: createWebHistory(), 路径带 #// 哈希模式: createWebHashHistory(), 路径不带 #// history: createWebHashHistory(),history:createWebHistory(),...})