一.单页应用程序与多页应用程序之间的比较
二.单页的应用场景
系统类网站 / 内部网站 / 文档类网站 / 移动端网站
三.路由的介绍
1. 什么是路由
路由是一种映射关系
2. Vue中的路由是什么
路径和组件的映射关系
四.VueRouter的使用
5个基础步骤(固定)
1. 下载:下载VueRouter模块到当前工程,版本3.6.5
yarn/vue add vue-router@3.6.5
2. 引入
import VueRouter from 'vue-router'
3. 安装注册
Vue.use(VueRouter)
4. 创建路由对象
const router = new VueRouter()
5. 注入,将路由对象注入到new Vue实例中,建立关联
new Vue({
render: h => h(App),
router
}).$mount('#app')
2个核心步骤
1. 创建需要的组件(views目录),配置路由规则
2. 配置导航,配置路由出口(路径匹配的组件显示的位置)
五. 组件存放目录问题(组件分类)
分类开来 更易维护
·src / views文件夹
·页面组件 - 页面展示 - 配合路由用
·src / components文件夹
·复用组件 - 展示数据 - 常用于复用
六. 路由模块封装
·路由模块的封装抽离的好处是什么
拆分模块,利于维护
以后如何快速引入组件
基于@指代src目录,从src目录出发找组件
七. 使用router-link替代a标签实现高亮
vue-router提供了一个全局组件router-link(取代a标签)
1. 能跳转,配置to属性指定路径(必须)。本质还是a标签,to无需#
2. 能高亮,默认就会提供高亮类名,可以直接设置高亮样式
·router-link-active模糊匹配(用的多)
to='/my'可以匹配 /my /my/a /my/b ...
·router-link-exact-active精准匹配
to='/my'仅可以匹配 /my
八. 自定义匹配类名
说明:router-link的两个高亮类名太长了,我们希望能定制
const router = new VueRouter({
routes: [...],
linkActiveClass: "类名1",
linkExactActiveClass: "类名2"
})
九. 声明式导航 - 跳转传参
目标:在跳转路由时,进行传值
1. 查询参数传参
1. 语法格式
·to='/path?参数名=值'
2. 对应页面组件接收传递过来的值
·$router.query.参数名
目标:在跳转路由时,进行传值
2. 动态路由传参
1. 配置动态路由
const router = new VueRouter({
routes: [
...,
{
path: '/search/:words',
component: Search
}
]
})
2. 配置导航链接
·to="/path/参数值"
3. 对应页面组件接收传递过来的值
·$route.params.参数名
动态路由参数可选符
问题:配了路由path:"/search/:words"为什么按下面步骤操作,会未匹配到组件,显示空白
原因:/search/:words表示,必须要传参数。如果不传参数,也希望匹配,可以加个可选符"?"
const router = new VueRouter({
routes: [
{path: '/', redirect: '/home'},
{path: '/home', component: Home},
{path: '/search/:words?', component: Search}
]
})
编程式导航-基本跳转
两种语法:
1. path路径跳转(简易方便)
this.$router.push('路由路径')
this.$router.push({
path: '路由路径'
})
2. name命名路由跳转(适合path路径长的场景)
this.$router.push({
name: '路由名'
})
{name: '路由名', path: '/path/xxx', component: xxx},
编程式导航-路由传参
两种传参方式:查询参数+动态路由传参
1.1 path路径跳转传参(query传参)
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
this.$router.push({
path: '/路径',
query: {
参数名1: '参数值1',
参数名2: '参数值2'
}
})
1.2 path路径跳转传参(动态路由传参)
this.$router.push('/路径/参数值')
this.$router.push({
path: '/路径/参数值'
})
2.1 name命名路由跳转传参(query传参)
this.$router.push({
name: '路由名字',
query: {
参数名2: '参数值1',
参数名2: '参数值2'
}
})