单页应用和多页应用
单页面应用:所有功能在同一个页面实现效果:
.一个.html文件
.前端路由
.组件化开发
多页面应用:与单页面应用功能相对应的,不同的功能用不同的页面来实现
单页面与多页面对比
| 对比部分 | 单页应用（最流行） | 多页面应用（传统方式） |
|---|---|---|
| 页面组成 | 一个html文件多个组件组成 | 多个html文件 |
| 静态资源共用 | 共用，一次性加载完毕,借助ssr优化 | 不共用，每个页面都加载一遍 |
| 刷新方式 | 页面局部刷新 | 整页加载 |
| url模式 | itcast.com/#/pageone | itcast.com/pageone.html |
| 用户体验 | 用户体验良好 | 页面切换加载缓慢体验较差 |
| 数据传递 | 容易 | 依赖url传参，cookie,localStorage |
| 搜索引擎优化 | 不利于seo优化，需要ssr（服务器端渲染）优化 | 支持良好 |
| 使用场景 | 追求高体验 不要求seo | 高度要求seo |
| 开发成本 | 较高 需要依赖专业的框架, 开发效率高 | 较低 重复代码多, 开发效率低 |
路由的理解与概念
路由:就是一一对应关系的集合
前端路由和后端路由是有点区别的哦注意别搞混了.
前端路由(单页应用程序):一个url地址对应哪个组件.
后端路由:一个接口地址对应哪段接口地址
前端路由的工作原理其实就是对url的hash值进行改变和监听,切换对应页面组件的dom结构
下面为大家带来一段基础的使用
- src/views/创建并在App.vue里导入和注册组件
MyHome.vue
MyMovie.vue
MyAbout.vue
<script>
import MyAbout from './views/my-about.vue'
import MyHome from './views/my-home.vue'
import MyMovie from './views/my-movie.vue'
export default {
components: {
MyHome,
MyAbout,
MyMovie
}
}
</script>
- 通过动态组件, 控制要显示的组件
<template>
<div>
<h1>App组件</h1>
<component :is="comName"></component>
</div>
</template>
<script>
export default {
// ...省略其他
data () {
return {
comName: 'MyHome'
}
}
}
</script>
- 声明三个导航链接, 点击时修改地址栏的 hash 值
<template>
<div>
<h1>App组件</h1>
<a href="#/home">首页</a>
<a href="#/movie">电影</a>
<a href="#/about">关于</a>
<component :is="comName"></component>
</div>
</template>
- 在 created 中, 监视地址栏 hash 时的变化, 一旦变化, 动态切换展示的组件
created () {
window.onhashchange = () => {
switch(location.hash) {
case '#/home':
this.comName = 'my-home'
break
case '#/movie':
this.comName = 'my-movie'
break
case '#/about':
this.comName = 'my-about'
break
}
}
},
路由-官方路由基本使用
说明⚠️：如果使用vue-cli创建项目，没有选择路由插件，需要单独安装和配置
步骤
- 安装包
- 配置路由
- 使用路由
操作
- 安装
npm i vue-router@3.5.3
- 创建路由文件
router/index.js
// 导入路由插件
import VueRouter from 'vue-router'
import Vue from 'vue'
// 使用插件 - 重要
Vue.use(VueRouter)
// 导入组件
import Page1 from './Page1.vue'
import Page2 from './Page2.vue'
import Page3 from './Page3.vue'
// 创建路由规则
const router = new VueRouter({
routes: [
{
path: "/page1", // 当浏览器访问 http://localhost:8080/#/page1时，
component: Page1 // 装入组件 Page1
},
{
path: "/page2",
component: Page2
},
{
path: "/page3",
component: Page3
}
]
})
export default router
3.在main.js中使用路由
import router from './router/index.js'
new Vue({
router: router, // 使用路由
render: h => h(App),
}).$mount('#app')
在页面中使用路由需要这个代码
<router-view></router-view>
下载路由模块, 编写对应规则注入到vue实例上, 使用router-view挂载点显示切换的路由
