什么是单页应用程序: 单页应用程序:SPA【Single Page Application】是指所有的功能都在一个html页面上实现
单页面应用程序,之所以开发效率高,性能好,用户体验好 最大的原因就是:页面按需更新
修改地址栏路径时,切换显示匹配的组件
固定5个固定的步骤(不用死背,熟能生巧)
npm install vue-router@3.6.5
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter()
new Vue({
render: h => h(App),
router:router
}).$mount('#app')
当我们配置完以上5步之后 就可以看到浏览器地址栏中的路由 变成了 /#/的形式。表示项目的路由已经被Vue-Router管理了
这里我们在App.vue
中配置
<div class="footer_wrap">
<a href="#/find">发现音乐</a>
<a href="#/my">我的音乐</a>
<a href="#/friend">朋友</a>
</div>
<div class="top">
<router-view></router-view>
</div>
分类开来的目的就是为了 更易维护
如果将所有的路由配置 都配配置在main.js中, 那么如果模块很多, 那么项目就不利于维护, 所以我们需要拆分路由模块
router/index.js
的内容
// 路由的使用步骤 5 + 2
// 5个基础步骤
// 1. 下载 v3.6.5
// 2. 引入
// 3. 安装注册 Vue.use(Vue插件)
// 4. 创建路由对象( 也就是一些组件 )
// 5. 注入到new Vue中,建立关联
// 2个核心步骤
// 1. 建组件(views目录),配规则
// 2. 准备导航链接,配置路由出口(匹配的组件展示的位置)
//@ 代表的就是src
import Find from '@/views/Find'
import My from '@/views/My'
import Friend from '@/views/Friend'
import Link from '@/views/Link'
import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter) // VueRouter插件初始化
const router = new VueRouter({
// routes 路由规则们
// route 一条路由规则 { path: 路径, component: 组件 }
routes: [
{ path: '/find', component: Find },
{ path: '/my', component: My },
{ path: '/friend', component: Friend },
{path: '/link', component: Link}
]
})
export default router
如果使用a标签进行跳转的话,需要给当前跳转的导航加样式,同时要移除上一个a标签的样式,太麻烦!!!
vue-router 提供了一个全局组件 router-link (取代 a 标签)
<div class="footer_wrap">
<router-link to="/find">发现音乐</router-link>
<router-link to="/my">我的音乐</router-link>
<router-link to="/friend">朋友</router-link>
</div>
使用router-link跳转后,我们发现。当前点击的链接默认加了两个class的值 router-link-exact-active和router-link-active
我们可以给任意一个class属性添加高亮样式即可实现功能
<style>
.footer_wrap a.router-link-active {
background-color: purple;
}
</style>
当我们使用router-link
跳转时,自动给当前导航加了**两个类名. **
相当于a标签加上了两个类名
router-link-exact-active
to=”/my” 仅可以匹配 /my
不能对其他的路径起作用。
router-link-active
to=”/my” 可以匹配 /my /my/a /my/b …. 只要是以/my开头的路径 都可以和 to=”/my”匹配到
就是如果我们匹配到发现音乐下面的排行榜名 ,但是同时还希望 发现音乐也是高亮显示, 那么我们就可以通过使用模糊匹配的方式来实现
对于
router-link-exact-active
和router-link-active
, 认为类名太长了,如果想要换的短一些, 可以通过使用下面的即可
我们可以在创建路由对象时,额外配置两个配置项即可。 linkActiveClass和linkExactActiveClass
const router = new VueRouter({
routes: [...],
linkActiveClass: "类名1",
linkExactActiveClass: "类名2"
})
// 创建了一个路由对象
const router = new VueRouter({
routes: [
...
],
linkActiveClass: 'active', // 配置模糊匹配的类名
linkExactActiveClass: 'exact-active' // 配置精确匹配的类名
})
最后再将style
中之前配置的 router-link-exact-active
更改为自己使用的类名1
和类名2
即可。
在跳转路由时,进行传参 比如:现在我们在搜索页点击了热门搜索链接,跳转到详情页,需要把点击的内容带到详情页,改怎么办呢?
语法格式:<router-link to="to/path?参数名=值"> </router-link>对应的页面接收参数的语法:<p>{{
const router = new VueRouter({
routes: [
...,
// /search/:参数名 表示,必须要传参数。如果不传参数,也希望匹配,可以加个可选符"?"
{ path: '/search/:参数名', component: Search }
]
})
to="/path/参数值"
可以直接写参数名, 不需要写
?key=value
$route.**params**.参数名
params后面的参数名要和动态路由配置的参数保持一致
网页打开时, url 默认是 / 路径,未匹配到组件时,会出现空白
重定向 → 匹配 / 后, 强制跳转 /home 路径
{ path: 匹配路径, redirect: 重定向到的路径 },
比如:
{ path:'/' ,redirect:'/home' }
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/home'},
...
]
})
找不到路径匹配的时候, 通过404的路由,虽然配置在任何一个位置都可以,但一般都配置在其他路由规则的最后面
import NotFind from '@/views/NotFind'
const router = new VueRouter({
routes: [
...
{ path: '*', component: NotFind } //最后一个
]
})
默认是hash模式, 就是带 # 的 路由的路径看起来不自然, 有#,能否切成真正路径形式?
const router = new VueRouter({
mode:'histroy', //默认是hash , 通过这个配置就是设置成为history
routes:[]
})
点击按钮跳转。 通过js的格式 实现跳转
两种语法:
通过点击事件触发
methods: {
clickItem() {
//两种方法
//1. 简单写法
this.$router.push('路由路径')
//2. 完整写法
this.$router.push({
path: '路由路径'
})
}
}
特点:适合 path 路径长的场景
语法:
const router = new VueRouter({
// routes 路由规则们
// route 一条路由规则 { path: 路径, component: 组件 }
routes: [
{ name: '路由名', path: '/path/xxx', component: XXX },
]
})
methods: {
clickItem() {
this.$router.push({
name: '路由名'
})
}
}
下面的演示案例,都是通过点击事件触发的, 所以使用
clickItem
函数来实现其中的传参
methods: {
clickItem() {
//简单写法
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
//完整写法
this.$router.push({
path: '/路径',
query: {
参数名1: '参数值1',
参数名2: '参数值2'
}
})
}
}
接受还是通过$route.query.参数名
methods: {
clickItem() {
//简单写法
this.$router.push('/路径/参数值')
//完整写法
this.$router.push({
path: '/路径/参数值'
})
}
}
接受参数的方式依然是:$route.params.参数值
methods: {
clickItem() {
this.$router.push({
name: '路由名字',
query: {
参数名1: '参数值1',
参数名2: '参数值2'
}
})
}
}
methods: {
clickItem() {
this.$router.push({
name: '路由名字',
params: {
参数名: '参数值',
}
})
}
}
**分析:配路由 + 实现功能 **
① 首页 和 面经详情,两个一级路由 ② 首页内嵌四个可切换页面 (嵌套二级路由)
① 首页请求渲染 ② 跳转传参 到 详情页,详情页渲染 ③ 组件缓存,优化性能
在Vouter.js中 , 通过导入 并且配置路由信息
import Vue from 'vue'
import VueRouter from "vue-router";
//1. 导入
import Layout from '@/views/Layout'
import ArticleDetail from '@/views/ArticleDetail'
Vue.use(VueRouter)
//2. 配置路由
const router = new VueRouter({
routes: [
{ path: '/', component: Layout },
{path: '/detail', component: ArticleDetail}
]
})
export default router
如果按照上面的配置, 那么首页的内容就无法展示, 二级路由 和 一级路由就成为同等级的路由 所以我们需要通过使用children 来进行配置
//1.1 导入二级路由
import Article from '@/views/Article'
import Collect from '@/views/Collect'
import Like from '@/views/Like'
import User from '@/views/User'
Vue.use(VueRouter)
//2. 配置路由
const router = new VueRouter({
routes: [
{
path: '/',
component: Layout ,
//2.1 配置当前路由嵌套的二级路由
children: [
{
path : '/article',
component: Article
},
{
path: '/like',
component: Like
},
{
path: 'collect',
component: Collect
},
{
path: 'user',
component: User
}
]
},
{path: '/detail', component: ArticleDetail}
]
})
但是仅仅这样配置还不够,我们还需要在一级路由的文件中配置二级路由的出口 ,通过这样就可以实现路由的配置
这里一级路由是
Layout.vue
二级路由是tabbar
下面的四个
<template>
<div class="h5-wrapper">
<div class="content">
<!-- 配置二级路由的出口 -->
<router-view></router-view>
</div>
<nav class="tabbar">
<a href="#/article">面经</a>
<a href="#/collect">收藏</a>
<a href="#/like">喜欢</a>
<a href="#/user">我的</a>
</nav>
</div>
</template>
router-link(to)
<template>
<div class="h5-wrapper">
<div class="content">
<!-- 配置二级路由的出口 -->
<router-view></router-view>
</div>
<nav class="tabbar">
<router-link to="#/article">面经</router-link>
<router-link to="#/collect">收藏</router-link>
<router-link to="#/like">喜欢</router-link>
<router-link to="#/user">我的</router-link>
</nav>
</div>
</template>
<style>
a.router-link-active {
color: orange;
}
</style>
这里我们实现的是首页的基础内容渲染
在Article.vue
中 ,实现显示页面的所有内容
<template>
<div class="article-page">
<div class="article-item"
v-for="(item, index) in articelList"
:key="item.id"
@click="$router.push('/detail')">
<div class="head">
<img :src="item.creatorAvatar">
<div class="con">
<p class="title">{{ item.stem }}</p>
<p class="other">{{ item.creatorName }}| {{ item.createdAt }}</p>
</div>
</div>
<div class="body">
{{ item.content }}
</div>
<div class="foot">点赞 {{ item.likeCount }} | 浏览 {{ item.views }}</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
// 请求地址: https://mock.boxuegu.com/mock/3083/articles
// 请求方式: get
export default {
name: 'ArticlePage',
data () {
return {
// 接收发送的数据
articelList: [],
}
},
// 获取请求数据
async created() {
const articles = await axios.get('https://mock.boxuegu.com/mock/3083/articles')
//存入
console.log("test")
console.log(articles)
// 页面渲染
this.articelList = articles.data.result.rows
} ,
//在页面挂载阶段进行页面渲染
mounted (){
}
}
</script>
通过点击事件进行跳转, 并且在跳转的同时需要携带内容的参数
在文章列表中页中, 通过点击事件@click="
<template>
<div class="article-page">
<div class="article-item"
v-for="(item, index) in articelList"
:key="item.id"
@click="$router.push(`/detail/${item.id}`)">
<div class="head">
<img :src="item.creatorAvatar">
<div class="con">
<p class="title">{{ item.stem }}</p>
<p class="other">{{ item.creatorName }}| {{ item.createdAt }}</p>
</div>
</div>
<div class="body">
{{ item.content }}
</div>
<div class="foot">点赞 {{ item.likeCount }} | 浏览 {{ item.views }}</div>
</div>
</div>
</template>
{path: '/detail/:id', component: ArticleDetail}
@click=”router.push(/detail/{item.id})”
Article
详情页面通过 this.$route.params.id
来接受数据
通过routerback返回
<nav class="nav"><span class="back" @click="$router.back()"><</span> 面经详情</nav>
通过得到的传过来的请求参数, 然后再通过axios
进行发送请求 ,最后将得到的数据。 最后将数据渲染到页面上
问题:
从面经列表 点到 详情页,又点返回,数据重新加载了 但是我们希望回到原来的位置
原因:
当路由被跳转后,原来所看到的组件就被销毁了(会执行组件内的beforeDestroy和destroyed生命周期钩子),重新返回后组件又被重新创建了(会执行组件内的beforeCreate,created,beforeMount,Mounted生命周期钩子),所以数据被加载了
解决方案: 利用keep-alive把原来的组件给缓存下来
keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。 keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件中。 优点: 在组件切换过程中把切换出去的组件保留在内存中,防止重复渲染DOM, 减少加载时间及性能消耗,提高用户体验性。
缓存所有的内容
<template>
<div class="h5-wrapper">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>
但是这样会导致所有的内容都被缓存, 容易出现乱序的现象
所以需要配置<keep-alive>
的属性
keep-alive
的三个属性① include : 组件名数组,只有匹配的组件会被缓存 ② exclude : 组件名数组,任何匹配的组件都不会被缓存 ③ max : 最多可以缓存多少组件实例
组件名 就是该组件中的 name, 如果没有name 才会找文件名作为组件名数组
<template>
<div class="h5-wrapper">
<keep-alive :include="keepArr">
<router-view></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
name: "h5-wrapper",
data() {
return {
// 缓存组件的数组
keepArr: ['LayoutPage']
}
}
}
</script>
通过:include
就可以实现对指定组件的缓存