网站设计中的js,wordpress中文语言,手机网站制作的价格,家具企业网站模板单页面应用 与 多页面应用
单页面应用#xff08;Single-Page Application#xff0c;SPA#xff09;和多页面应用#xff08;Multi-Page Application#xff0c;MPA#xff09;是 Web 应用程序的两种不同架构方式。它们在页面加载和交互方式上有所区别。
单页面应用Single-Page ApplicationSPA和多页面应用Multi-Page ApplicationMPA是 Web 应用程序的两种不同架构方式。它们在页面加载和交互方式上有所区别。
单页面应用SPA指的是整个应用只有一个 HTML 页面页面的内容和交互都通过 JavaScript 动态加载和更新。在 SPA 中页面的切换和内容的变化通过前端路由来实现通常使用框架如 Vue、React、Angular来构建。SPA 的优点是用户体验好无需刷新整个页面即可根据用户交互动态地更新内容提供流畅的用户界面。但对于首次加载较大的应用会消耗较多的初始加载时间。
多页面应用MPA指的是应用由多个独立的 HTML 页面组成每个页面对应一个独立的功能或视图。在 MPA 中每个页面都是独立的它们通过链接或表单提交等方式进行页面跳转。在每个页面中服务器会返回一个新的 HTML 页面包含所需的样式和脚本。MPA 的优点是每个页面都有独立的 URL有利于 SEO搜索引擎优化也更适合传统的 Web 开发方式。但页面之间的切换会导致整个页面的刷新用户体验稍差一些。
选择SPA还是MPA主要取决于应用的需求和目标。SPA适合构建交互复杂、用户体验要求高的应用如社交媒体应用、在线编辑器等而MPA适合构建内容丰富、独立页面较多的应用如电子商务网站、新闻门户等。
常见的网站比如网易云音乐就是单页面应用而京东淘宝就是一个多页面应用。 VueRouter路由
像vue开发的就是一个典型的单页面程序。 Vue Router 是 Vue.js 官方提供的路由管理器。它能够帮助你在 Vue 单页面应用SPA中实现页面之间的导航和路由功能。它是一种映射关系映射了页面组件与路径的关系。 如何配置VueRouter 下载vue-router因为它是一个单独的模块所以需要下载。 vue2对应的vue-router版本是 vue-router3.x vue3对应的vue-router版本是 vue-router4.x 使用npm下载npm install vue-router3.6.5 --save 使用yarn下载yarn add vue-router3.6.5 在main.js中引入。
import VueRouter from vue-router安装注册。
Vue.use(VueRouter)创建路由对象。
const router new VueRouter();将路由对象注入到Vue实列中建立关联,键值对形式键与值同名可简写。
new Vue({render: h h(App),router
}).$mount(#app)main.js完整代码
import Vue from vue
import App from ./App.vue
import VueRouter from vue-routerVue.config.productionTip false
Vue.use(VueRouter)const router new VueRouter();new Vue({render: h h(App),router
}).$mount(#app)配置成功启动项目浏览器顶部地址栏会出现#号
如何使用VueRouter 首先肯定是要配置路由规则。 首先准备了三个简单的页面组件。 引入页面组件然后将他添加到router的routes属性中path是访问路径component是对应的组件页面{path:/fine,component:MyFine},页面组件的名称最好超过两个单词否则会报错因为是vue规定的为了有更强大的语义性。name
import Vue from vue
import App from ./App.vue
import MyFine from ./views/MyFine.vue
import MyFriend from ./views/MyFriend.vue
import MyIndex from ./views/MyIndex.vue
import VueRouter from vue-router
Vue.use(VueRouter)Vue.config.productionTip falseconst router new VueRouter({
//配置路由规则 path是访问路径component是对应的组件页面routes:[{path:/fine,component:MyFine},{path:/friend,component:MyFriend},{path:/index,component:MyIndex},]
});
new Vue({render: h h(App),router
}).$mount(#app)路由的路径跳转与容器 router-view/router-view
templatediv idappdiv classmenu-boxul classmenu!-- 路由路径跳转只需要在a标签上写main.js配置规则的path路径 --lia href#/index首页/a/lilia href#/fine发现/a/lilia href#/friend朋友/a/li/ul/divdiv !-- 这是组件页面的容器,切换菜单只会更新这里面的内容 --router-view/router-view/div/div
/templatescriptexport default {name: App,components: {}
}
/scriptstyle
*{margin: 0;padding: 0;
}
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}
.menu-box{width: 100%;height: 50px;
}
.menu{height: 100%;text-align: center;line-height: 50px;
}
.menuli{float: left;width: 33%;list-style: none;background: skyblue;
}/style效果点击上面的menu菜单下面的内容也会随之改变
提取路由代码封装路由模块
像上面这样配置路由会有一点问题就是不易于维护因为把所有的配置全部都写在main.js里面那我们后面维护看见main.js文件里面的一堆代码头都晕了所以这里我们将它提取出来再通过import导入到main,js。
首先建立路由模块文件 将main.js里面配置路由的代码赋值到index.js。导入文件的路径需要修改:代表从src文件出发寻找文件。
import MyFine from /views/MyFine.vue
import MyFriend from /views/MyFriend.vue
import MyIndex from /views/MyIndex.vue
import VueRouter from vue-router
import Vue from vueVue.use(VueRouter)const router new VueRouter({routes:[{path:/fine,component:MyFine},{path:/friend,component:MyFriend},{path:/index,component:MyIndex},]});export default router;再main.js里面导入路由模块直接使用。
import Vue from vue
import App from ./App.vue
//导入路由模块
import router from ./router/index.jsVue.config.productionTip falsenew Vue({render: h h(App),//直接使用router
}).$mount(#app)
使用给menu菜单选中的高亮样式
router-link是什么? vue-router提供的全局组件用于替换 a 标签router-link怎么用?
router-link to/路径值/router-link再使用 router-link to/index首页/router-link时to属性里面的路径就可以不用加#号了 必须传入to属性,指定路由路径值
router-link好处? 能跳转能高亮(自带激活时的类名router-link-active 和 router-link-exact-active我们需要高亮效果可以直接再style样式中为这个类名添加高亮的样式了。
修改刚才的代码为
templatediv idappdiv classmenu-boxul classmenu!-- 路由路径跳转只需要在a标签上写main.js配置规则的path路径 --router-link to/index首页/router-linkrouter-link to/fine发现/router-linkrouter-link to/friend朋友/router-link/ul/divdiv !-- 这是组件页面的容器,切换菜单只会更新这里面的内容 --router-view/router-view/div/div
/templatescriptexport default {name: App,components: {}
}
/scriptstyle
*{margin: 0;padding: 0;
}
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}
.menu-box{width: 100%;height: 50px;
}
.menu{height: 100%;text-align: center;line-height: 50px;
}
.menua{float: left;width: 33%;display: block;list-style: none;background: skyblue;
}
//为激活时的这个类名添加高亮属性样式
.menua.router-link-active{ background: rgb(12, 155, 211);
}
/style效果
router-link-active 和 router-link-exact-active的意义 这里可以看见我选中的标签上面时加了两个类的这两个类的意义是什么呢 router-link-active 模糊匹配 router-link-exact-active精确匹配 模糊匹配就是地址栏上面有子目录也可以匹配上。
而精确匹配就是地址栏和router-link的to属性路径必须时一模一样才可以匹配上。
如现在时两个条件都满足模糊和精确条件都满足所以选中的menu里面类就是两个 如现在就是不满足精确条件了所以选中的menu里面类就是一个router-link-active
自定义高亮类名 在路由模块中修改
import MyFine from /views/MyFine.vue
import MyFriend from /views/MyFriend.vue
import MyIndex from /views/MyIndex.vue
import VueRouter from vue-router
import Vue from vue
Vue.use(VueRouter)
const router new VueRouter({routes:[{path:/fine,component:MyFine},{path:/friend,component:MyFriend},{path:/index,component:MyIndex},],//模糊匹配的类名linkActiveClass:active,//精确匹配的类名linkExactActiveClass:exact-active});
export default router;这样添加的就是自定义的类名了如图
