单页应用和多页应用
单页面应用(SPA , single page application) :
所有的功能在 一个页面上实现
一个html文件
· 前端路由
· 组件化开发
· 例如 : 网易云音乐 小米移动端
多页应用 : 与单页应用相对应的 , 不同的功能通过不同的页面来显示
单页面与多页面对比 :
路由
路由 : 就是一一对应关系的集合
前端路由(单页应用程序): 一个url地址,对应哪个组件
后端路由:一个接口地址,对应哪一段接口地址
前端路由 :
后端路由 :
前端路由工作原理
本质 : 是对url的hash值进行改变和监听,切换对应页面组件的dom结构
思路 :
- URL 地址栏中的 Hash 值发生了变化
- 前端js监听了到 Hash 地址的变化 window.οnhashchange=()=>{ }
- 前端js把当前 Hash 地址对应的组件渲染都浏览器中
简单实现的代码如下 :
- 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>
2. 通过动态组件, 控制要显示的组件
<template>
<div>
<h1>App组件</h1>
<component :is="comName"></component>
</div>
</template>
<script>
export default {
// ...省略其他
data () {
return {
comName: 'MyHome'
}
}
}
</script>
3. 声明三个导航链接 , 点击时修改地址栏的 hash 值
<template>
<div>
<h1>App组件</h1>
<a href="#/home">首页</a>
<a href="#/movie">电影</a>
<a href="#/about">关于</a>
<component :is="comName"></component>
</div>
</template>
4. 在 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
}
}
},
总结 : 改变浏览器url的hash值, JS监听到hash值改变, 把对应的组件显示到同一个挂载点
路由-官方路由基本使用
目的 : 学会vue官方提供的vue-router路由系统功能模块使用
说明⚠️:如果使用vue-cli创建项目,没有选择路由插件,需要单独安装和配置
目录
根目录
└── src
├── 路由
│ ├── pages
│ │ ├── MyMovie.vue # 页面1。在router/index.js导入使用
│ │ └── MyHome.vue # 页面2。在router/index.js导入使用
│ └── App.vue # router-view,用来装入对应的组件
├── main.js # 导入根组件 App.vue; 导入路由router/index.js
└── router
└── index.js # 导入页面1,页面2;配置路由规则:path --> component
步骤
- 安装包
- 配置路由
- 使用路由
操作
- 安装
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')
4. 在App组件中使用路由
// 设置路由出口,匹配到的路由组件,会默认装入在这里
// <component :is="xxx"></component>
<router-view></router-view>
图示如下 :
链接导航-router-link
作用: 用于提供路由链接,实现页面跳转
格式: <router-link to="/home">首页</router-link>
要点:
- 是vue-router提供的组件
- router-link最终会渲染成a链接
- router-link自带链接导航高亮的功能
<template>
<div>
<h1>App组件</h1>
<ul>
<li><router-link to="/home">首页</router-link></li>
<li><router-link to="/movie">电影</router-link></li>
<li><router-link to="/about">关于</router-link></li>
</ul>
<router-view></router-view>
</div>
</template>
激活类名 :
router-link-exact-active router-link-active
总结 :
链接导航, 用router-link配合to, 实现点击切换路由
- router-link组件会被vue解析成a标签,但不能直接通过a标签来跳转。
- 如果当前路由被激活会添加特殊的类名
页面跳转传参
页面跳转: 通过router-link切换路由,展示另一个页面
html页面之间如何传参? => url?key=val&key=val
vue路由传参的方式
两种方式:
- query(查询字符串)传参。 适用场景:页面搜索
- params传参。 适用场景:详情页
- 创建components/MyGoods.vue - 准备接收路由上传递的参数和值
<div>
你要浏览的商品是: {{ $route.query.name }} {{ $route.params.goodsId}}
</div>
2. 定义路由
{
path: "/goods",
component: MyGoods
},
{
path: "/goods/:goodsId",
component: MyGoods
},
3. 导航跳转 , 传值给MyGoods.vue组件
<li><router-link to="/goods?name=外套">外套</router-link></li>
<li><router-link to="/goods/123">详情</router-link></li>
查询字符串传参 :
params传参 :
总结 :
?key=value => 用$route.query.key 取值
/值-需要提前在路由规则/path/:key => 用$route.params.key 取值
路由-重定向
重定向 : 用户访问的是A地址,系统把它切换到B地址。
应用场景:改变默认访问页面的行为
在router/index.js
- 修改配置
const routes = [
{
path: "/",
redirect: "/home" // 重定向
}
]
路由404
统一处理异常地址:那些个正常配置的地址之外的地址。
通过通配符*
,设置404页面
import NotFound from "@/components/NotFound";
const routes = [
{
path: "/",
redirect: "/home" // 重定向
},
// ...正常路由
{ // 当上面路由都不匹配, 匹配这个通配符, 显示NotFound页面
path: "*",
component: NotFound
}
]
编程式导航
编程式导航 ====> 写代码的方式来让页面跳转
API
// 跳转页面不传参
this.$router.push('/路由路径')
this.$router.push({path: '路由路径'})
this.$router.push({name: '路由名称'})
// 跳转并query传参-方式1
this.$router.push("/路由路径?参数1=值1&参数2=值2")
// 跳转并query传参-方式2
this.$router.push({
path: "路由路径",
query: {
"参数1":值1,
"参数2":值2
}
})
// 跳转并params传参-方式1
this.$router.push("/路由路径/值1/值2")
// 跳转并params传参-方式2
this.$router.push({
name: "路由名称",
params: {
"参数1":值1,
"参数2":值2
}
})
// 后退
$router.back()
路由嵌套
原理:router-view中再次包含router-view。
背景:一个组件内部包含的业务还是很复杂,需要再次进行拆分。
格式:
routes:[
{
path: '/page1',
component: Page1, // 这个组件内部还有router-view
children: [
{
path:'', // path为空,表示当 #/page1时,显示 Page1组件+组件1
component: 组件1 //
},
{
path:'/xx1', // path以/开头,表示当 #/xx1时,显示 Page1组件+组件2
component: 组件2
},
{
path:'xx2', // path以/开头,表示当 /page1/xx2时,显示 Page1组件+组件3
component: 组件3
}
]
}
]