一、单页面应用
单页面应用(Single Page Application),简称SPA,指的是一个网站中只有唯一的一个HTML页面,所有的功能与交互都在这唯一的一个页面内完成。
二、单页面应用 VS 多页面应用
单页面多用于系统类网站、内部网站、文档类网站、移动端站点
多页面应用多用于公司官网、电商类网站
单页面应用程序,之所以开发效率高,性能高,用户体验好,最大的原因就是: 页面按需更新
三 、前端路由
前端路由:Hash地址与组件之间的对应关系
页面效果:在浏览器中访问不同的Hash地址,会显示不同的组件
注:切换Hash地址时,页面不会刷新,只有组件的内容会变
四、vue路由的基本使用
1、什么是vue路由
vue路由(vue-router)是vue.js官方给出的路由解决方案。它只能结合vue项目使用,能够轻松的管理SPA项目中组件的切换。
官方地址:vue路由官方网站
2、vue路由的安装和基础配置
2.1 安装vue-router包
2.2 创建路由模块
在src文件夹下,新建文件,路径及文件名称为src/router/index.js
index.js内容如下:
// 1.导入所需模块
import Vue from 'vue'
import VueRouter from 'vue-router'
// 2.调用Vue.use()函数,将VueRouter安装为Vue的插件
Vue.use(VueRouter)
// 3.配置路由规则
const routes = []
// 4.创建路由实例对象
const router = new VueRouter({
// 路由配置
routes,
})
// 5.导出路由的实例对象
export default router
2.3 创建并挂载路由模块(main.js)
import Vue from 'vue'
import App from './App.vue'
// 1.导入路由模块
import router from '@/router' // 如果导入的是文件夹中的index文件,index可以省略
Vue.config.productionTip = false
new Vue({
render: h => h(App),
// 2.挂载路由模块
router,
}).$mount('#app')
以上,便是vue-router的基础配置。
验证是否配置成功:
浏览器访问localhost:8080,如果路径后自动添加了 /#/ ,则基本配置成功。
3、路由使用的核心步骤
3.1 配置路由规则(router/index.js)
import Discover from '@/views/DisCover.vue'
import MyMusic from '@/views/MyMusic.vue'
import Follow from '@/views/Follow.vue'
const routes = [
// 直接写到这个数组中的路由规则,级别最大,叫做一级路由
// 一级路由只能展示在App.vue中
{ path: '/discover', component: Discover },
{ path: '/myMusic', component: MyMusic },
{ path: '/follow', component: Follow },
]
3.2 设置路由出口(<router-view />)
// 在哪里展示,就在哪里添加
// 在App.vue中添加路由出口
<div class="top">
<router-view></router-view>
</div>
3.3 设置超链接(router-link)
// 导航栏,点击显示对应的组件内容
<div class="footer_wrap">
<router-link to="/discover">发现音乐</router-link>
<router-link to="/myMusic">我的音乐</router-link>
<router-link to="/follow">关注</router-link>
</div>
结果如下,点击导航栏,地址栏显示对应地址,且下方会显示对应内容:
4、嵌套路由
4.1 配置路由规则
import Recommend from '@/views/Recommend'
import TopList from '@/views/TopList'
import ArtList from '@/views/ArtList'
const routes = [
// 直接写到这个数组中的路由规则,级别最大,叫做一级路由
// 一级路由只能展示在App.vue中
{
path: '/discover',
component: Discover,
children: [
// 二级路由的path可以不写/
// 二级路由的访问地址会和一级路由的访问地址拼接
// 如访问推荐:/discover/recommend
{
path: 'recommend',
component: Recommend,
},
{
path: 'topList',
component: TopList,
},
{
path: 'artList',
component: ArtList,
},
],
},
]
4.2 设置路由出口
// 在discover.vue页面中,添加路由出口
<div class="top">
<router-view></router-view>
</div>
4.3 设置超链接
// 导航栏,点击显示对应的组件内容
// to后的地址,一定是完整的地址,加上一级路由的地址
<div class="link">
<router-link to="/discover/recommend">推荐</router-link>
<router-link to="/discover/topList">排行榜</router-link>
<router-link to="/discover/artList">歌手</router-link>
</div>
结果如下,点击推荐、排行榜、歌手,下方会切换对应组件内容:
地址栏为:localhost:8080/#/discover/topList
5、路由传参
5.1 查询参数传参
核心步骤:
a、超链接添加好合适的参数
<h2>入驻歌手</h2>
<div class="list">
<div class="item" v-for="item in list" :key="item.id">
<img :src="item.smallImg" />
<p>
<router-link :to="'/discover/artList?id=' + item.id">{{ item.name }}</router-link>
</p>
</div>
</div>
// 数据如下
list: [
{
id: 1,
name: '张惠妹',
smallImg: require('../assets/zhanghuimei-small.jpg'),
bigImg: require('../assets/zhanghuimei-big.jpg'),
},
{
id: 2,
name: '邓紫棋',
smallImg: require('../assets/dengziqi-small.jpg'),
bigImg: require('../assets/dengziqi-big.jpg'),
}
]
b、跳转后,组件中使用$route.query.参数名获取值
// 获取值,并展示对应的图在页面上
computed: {
getUrl() {
if (this.$route.query.id) {
return this.list.find(item => item.id == this.$route.query.id)
} else {
return {}
}
},
},
// 页面
<div class="conent">
<img :src="getUrl.bigImg" alt="" />
</div>
结果如下(点击上方名字,下方展示大图):
地址如下:/#/discover/artList?id=2
5.2 动态路由传参
核心步骤:
a、超链接添加好所需参数
<!-- 反引号(``)代表模板字符串,可用${}拼接变量 -->
<router-link :to="`/discover/topList/${item.name}`">
{{ item.name }}
</router-link>
b、修改路由规则为{path:'/xx/:id/',}或{path:'/xx/:id?} ,前一种代表参数必传,后一种参数为非必传
{
// ?代表name参数可传可不传
path: 'topList/:name?',
component: TopList,
}
c、跳转后,组件使用$route.params.参数名获取参数
<span>{{ $route.params.name }}</span>
结果如下(点击左侧,右侧蓝色字体相应更改):
地址如下:/#/discover/topList/新歌榜
6、重定向
示例:
// 若访问路径是/,则重定向至home页面
{ path: '/', redirect: '/home'},
7、路由模式
路由设置:
const router = new VueRouter({
// 路由配置
routes,
mode: history, // 设置为history模式
})
8、 404处理
404规则配置:
import NotFound from '@/views/NotFound'
{
path: '*',
component: NotFound,
}
9、链接高亮
修改模糊匹配及精确匹配的类名(router/index.js),建议一般不要修改,修改后容易造成样式冲突:
const router = new VueRouter({
// 路由配置
routes,
// mode: history, // 设置为history模式
linkActiveClass: 'active', // 模糊匹配自定义类名
linkExactActiveClass: 'exact', // 精确匹配自定义类名
})