Vue学习笔记3
Vue学习笔记
一、单页应用程序&路由介绍
1、介绍
单页应用程序：
- 所有的功能都在一个页面上实现
- 优点：按需更新性能高，开发效率高，用户体验好
- 缺点：学习成本高，首屏加载慢，不利于SEO
- 应用场景：系统类网站、内部网站、文档类网站、移动端站点
路由介绍
生活中的路由：设备和ip的映射关系
Vue中的路由：路径和组件的映射关系
2、路由的基本应用
VueRouter的介绍：
作用：修改地址栏路径时，切换显示匹配的组件
路由的使用步骤5+2
5个基础步骤（固定）
- 下载v3.6.5
npm add vue-router@3.6.5
- 引入
import VueRouter from 'vue-router'
- 安装注册Vue.use
Vue.use(VueRouter)
- 创建路由对象
const router= new VueRouter()
- 注入到new Vue中，建立关联
new Vue({
render: h => h(App),
router:router
}).$mount('#app')
2个核心步骤
- 创建需要的组件（views目录），配置路由规则Find.vue My.vue Friend.vue
//main.js中
import Find from './views/Find.vue'
import My from './views/My.vue'
import Friend from './views/Friend.vue'
const router= new VueRouter({
routes:[
{path:'/find',component:Find},
{path:'/my',component:My},
{path:'/friend',component:Friend},
]
})
- 准备导航链接，配置路由出口（路径匹配的组件显示的位置）
//App.vue中
<template>
<div>
<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>
</div>
</template>
二、组件存放目录问题
.vue组件分类：页面组件（用views文件夹存放-配合路由使用）、复用组件（用components文件夹存放）
三、路由的封装抽离
目标：将路由模块抽离出来，好处：拆分模块，利于维护
src下新建一个router文件夹内部新建index.js文件，将在main.js中创建的路由对象和引入都剪切进index.js中，并将该文件在main.js中引入，记得修改路径（或直接使用绝对路径）
//index.js
import Find from '../views/Find.vue'//@/vies/Find,用@指代src目录
import My from '../views/My.vue'//@/vies/My
import Friend from '../views/Friend.vue'//@/vies/Friend
import VueRouter from 'vue-router'
Vue.use(VueRouter)//Vue插件初始化
//创建了一个路由对象
const router= new VueRouter({
//routes路由规则们 route一条路由规则
routes:[
{path:'/find',component:Find},
{path:'/my',component:My},
{path:'/friend',component:Friend},
]
})
//main.js
import router from './router/index'
四、router-link替代a标签实现高亮
<router-link to=''></router-link>
等于
<a href=''></a>
- 能跳转，to属性必须指定，本质还是a标签，to无需#
- 能高亮，默认就会提供高亮类名（router-link-exact-active和router-link-active），可以直接设置高亮样式
- router-link-active模糊匹配（用的多）
- router-link-exact-actiive精确匹配
定制两个类名
const router=new Vue({
linkActiveClass:'类名1',//配置模糊匹配类名
linkExactActiveClass:'类名2'//配置精确匹配类名
})
五、声明式导航-跳转传参
1、两种跳转传参
目标：在跳转路由时，进行传值
- 查询参数传参（适合传多个参数）
- 跳转：to=‘/path?参数名=值’
- 获取：$route.query.参数名
- 动态路由传参（优雅简洁，传单个参数比较方便）
- 配置动态路由
const router=new VueRouter({
routes:[
{
path:'/search/:words（参数名）',
component:Search
}
]
})
- 配置导航链接，跳转
to='/path/参数值'
- 对应页面组件接收传递过来的值，获取
$route.params.word（参数名）
2、动态路由参数可选符
使用动态路由传参时，在跳转时必须要跟上参数值
如果不传参，但是希望匹配，可以加一个可选符?
即path:‘/search/:words?’
六、Vue路由
1、重定向
问题：网页打开，url默认是/路径，为匹配到组件时，会出现空白
说明：重定向–>匹配path后，强制跳转path路径
const router=new VueRouter({
routes:[
{path:'/',redirect:'/home'},
{path:'/search/:words（参数名）',component:Search},
{path:'/home',component:Home}
]
})
2、404
配在路由最后
const router=new VueRouter({
routes:[
{path:'/',redirect:'/home'},
{path:'/search/:words（参数名）',component:Search},
{path:'/home',component:Home},
{path:'*',component:NotFind}
]
})
3、模式设置
路由的路径看起来不自然，有#，用mode:'history’切成真正路径的形式
const router=new VueRouter({
routes:[
{path:'/',redirect:'/home'},
{path:'/search/:words（参数名）',component:Search},
{path:'/home',component:Home},
{path:'*',component:NotFind}
],
mode:'hisrory'
})
七、编程式导航
1、基本跳转
两种语法：
- path路径跳转（简易方便）
this.$router.push('路由路径')
或
this.$router.push({
path:'路由路径'
})
- name命名路由跳转（适合path路径长的场景）
//需要先给路由起名字
const router=new VueRouter({
routes:[
{name:"search",path:'/search/:words（参数名）',component:Search}
],
mode:'hisrory'
})
this.$router.push({
name:'路由名'
})
2、路由传参
两种传参方式：查询参数、动态路由传参
两种跳转方式，对于两种传参方式都支持
- path路径跳转传参（query传参）
this.$router.push('/路径?参数名1=参数值1&参数名2=参数值2')
或
this.$router.push({
path:'/路径',
query:{
参数名1:'参数值1',
参数名2:'参数值2'
}
})
获取用$route.query.参数名
- path路径跳转传参（动态路由传参）
this.$router.push('/路径?参数值')
或
this.$router.push({
path:'/路径/参数值'
})
获取用$route.params.参数名
- name命名路由跳转传参（query传参）
this.$router.push({
name:'路由名字',
query:{
参数名1:'参数值1',
参数名2:'参数值2'
}
})
获取用$route.query.参数名
- name命名路由跳转传参（动态路由传参）
this.$router.push({
name:'路由名字',
params:{
参数名:'参数值',
}
})
获取用$route.params.参数名
八、面经基础班案例
思路：先配置路由后实现功能
配路由步骤
- router–>index.js中配置空路由架子
//index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)//Vue插件初始化
//创建了一个路由对象
const router= new VueRouter({
//routes路由规则们 route一条路由规则
routes:[]
})
//main.js
import router from './router/index'
new Vue({
render:h=>h(App),
router
}).$mount('#app')
//App.vue
<template>
<div>
<router-view></router-view>//配置路由出口
</div>
</template>
- 配置一级路由
//index.js
import Layout from '@/views/Layout'
import ArticleDetail from '@/views/ArticleDetail'
const router= new VueRouter({
//routes路由规则们 route一条路由规则
routes:[
{
path:'/',
component:Layout
},//主页部分
{
path:'/detail',
component:ArticleDetail
}//面经详情部分
]
})
- 配置二级路由
步骤：1.在children配置项中，配规则 2.准备二级路由出口
//index.js
import Layout from '@/views/Layout'
import ArticleDetail from '@/views/ArticleDetail'
import Article from '@/views/Article'
import Collect from '@/views/Collect'
import Like from '@/views/Like'
import User from '@/views/User'
const router= new VueRouter({
//routes路由规则们 route一条路由规则
routes:[
{
path:'/',
redirect:'/article',//重定向，匹配到path'/'后，强制跳转'/article'
component:Layout,
//通过children配置项，配置嵌套子路由
children:[
{
path:'/article',
component:Article
},
{
path:'/collect',
component:Collect
},
{
path:'/like',
component:Like
},
{
path:'/user',
component:User
}
]
},//主页部分
{
path:'/detail',
component:ArticleDetail
}//面经详情部分
]
})
//Layout.vue
<template>
<div>
<router-view></router-view>//配置二级路由出口
<div>...</div>//底部导航栏
</div>
</template>
- 实现导航高亮
步骤：1.将a标签替换成router-link（to） 2.结合高亮类名实现高亮效果（css中配置a.router-link-active）
实现功能步骤
- 首页请求渲染：
- 安装axios（npm install axios）
- 看结构文档，确认请求方式，请求地址，请求参数
- created中发送请求，获取数据，存起来
- 页面动态渲染
- 跳转传参到详情页，详情页渲染
两种方案：
1.查询参数传参'/路径?参数名=参数值'=>this.$route.query.参数名（更适合多个参数的情况）
2.动态路由传参 配置动态路由path:'/路径/:参数名'=>'/路径/参数值'（常用反引号+${}） =>this.$route.params.参数名（更适合单个参数的情况）
push跳转 back返回 - 详情页渲染
- 安装axios（npm install axios）
- 看结构文档，确认请求方式，请求地址，请求参数
- created中发送请求，获取数据，存起来
- 页面动态渲染
- 组件缓存
- 利用keep-alive将组件缓存，当他包裹动态组件时（如router-view）会缓存不活动的组件实例，而不是销毁他们。
当查看详情页返回后会停留在点击时的页面，同时再次点入新的详情页，由于原详情页被缓存因此显示出的内容为原详情页。 - keep-alive三个属性：
1.include：组件名（不是文件名）数组，只有匹配的组件才会被缓存
2.exclude：组件名数组，任何匹配的组件都不会被缓存
3.max：最多可以缓存多少组件实例
//只希望LayOut被缓存
<keep-alive :include='LayOutPage'>
<router-view></router-view>
</keep-alive>
- 会触发两个生命周期函数（钩子）
activated：当组件被激活时触发–>进入页面
deactivated：当组件不被使用时触发–>离开页面