知识点自测
- url的组成部分都有哪些, hash值指的什么
今日学习目标
- 能够了解单页面应用概念和优缺点
- 能够掌握vue-router路由系统使用
- 能够掌握链接导航和编程式导航用法
- 能够掌握路由嵌套和路由守卫
- 能够掌握vant组件库基础使用
1. vue路由简介和基础使用
1.0 什么是路由
目标: 设备和ip的映射关系
目标: 接口和服务的映射关系
目标: 路径和组件的映射关系
1.1 为什么使用路由
目标: 在一个页面里, 切换业务场景
具体使用示例: 网易云音乐 https://music.163.com/
单页面应用(SPA): 所有功能在一个html页面上实现
前端路由作用: 实现业务场景切换
优点:
-
整体不刷新页面,用户体验更好
-
数据传递容易, 开发效率高
缺点:
-
开发成本高(需要学习专门知识)
-
首次加载会比较慢一点。不利于seo
1.2 vue-router介绍
目标: 如何在Vue项目中集成路由
官网: https://router.vuejs.org/zh/
vue-router模块包
它和 Vue.js 深度集成
可以定义 - 视图表(映射规则)
模块化的
提供2个内置全局组件
声明式导航自动激活的 CSS class 的链接
……
1.3 路由 - 组件分类
目标: .vue文件分2类, 一个是页面组件, 一个是复用组件
.vue文件本质无区别, 方便大家学习和理解, 总结的一个经验
src/views(或pages) 文件夹 和 src/components文件夹
- 页面组件 - 页面展示 - 配合路由用
- 复用组件 - 展示数据/常用于复用
总结: views下的页面组件, 配合路由切换, components下的一般引入到views下的vue中复用展示数据
1.4 vue-router使用
目标: 学会vue官方提供的vue-router路由系统功能模块使用
App.vue - 页面标签和样式准备(可复制继续写)
<template>
<div>
<div class="footer_wrap">
<a href="#/find">发现音乐</a>
<a href="#/my">我的音乐</a>
<a href="#/part">朋友</a>
</div>
<div class="top">
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.footer_wrap {
position: fixed;
left: 0;
top: 0;
display: flex;
width: 100%;
text-align: center;
background-color: #333;
color: #ccc;
}
.footer_wrap a {
flex: 1;
text-decoration: none;
padding: 20px 0;
line-height: 20px;
background-color: #333;
color: #ccc;
border: 1px solid black;
}
.footer_wrap a:hover {
background-color: #555;
}
.top {
padding-top: 62px;
}
</style>
- 安装
yarn add vue-router
- 导入路由
import VueRouter from 'vue-router'
- 使用路由插件
// 在vue中,使用使用vue的插件,都需要调用Vue.use()
Vue.use(VueRouter)
- 创建路由规则数组
const routes = [
{
path: "/find",
component: Find
},
{
path: "/my",
component: My
},
{
path: "/part",
component: Part
}
]
- 创建路由对象 - 传入规则
const router = new VueRouter({
// routes: routes
routes
})
- 关联到vue实例
new Vue({
router
})
Vue.config.productionTip = false
new Vue({
// 把路由对象注入到 new Vue 实例中
router:router,
render: (h) => h(App),
}).$mount('#app')
- components换成router-view
<router-view></router-view>
总结: 下载路由模块, 编写对应规则注入到vue实例上, 使用router-view挂载点显示切换的路由
总结2: 一切都围绕着hash值变化为准
2. vue路由 - 声明式导航
2.0 声明式导航 - 基础使用
目标: 可用全局组件router-link来替代a标签
- vue-router提供了一个全局组件 router-link
- router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)
- router-link提供了声明式导航高亮的功能(自带类名)
<template>
<div>
<div class="footer_wrap">
<router-link to="/find">发现音乐</router-link>
<router-link to="/my">我的音乐</router-link>
<router-link to="/part">朋友</router-link>
</div>
<div class="top">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
/* 省略了 其他样式 */
.footer_wrap .router-link-active{
color: white;
background: black;
}
</style>
总结: 链接导航, 用router-link配合to, 实现点击切换路由
2.1 声明式导航 - 跳转传参
目标: 在跳转路由时, 可以给路由对应的组件内传值
在router-link上的to属性传值, 语法格式如下
-
/path?参数名=值
-
/path/值 – 需要路由对象提前配置 path: “/path/参数名”
对应页面组件接收传递过来的值
-
$route.query.参数名
-
$route.params.参数名
-
创建components/Part.vue - 准备接收路由上传递的参数和值
<template> <div> <p>关注明星</p> <p>发现精彩</p> <p>寻找伙伴</p> <p>加入我们</p> <p>人名: { { $route.query.name }} -- { { $route.params.username }}</p> </div> </template>
-
路由定义
{ path: "/part", component: Part }, { path: "/part/:username", // 有:的路径代表要接收具体的值 component: Part },
-
导航跳转, 传值给MyGoods.vue组件
<router-link to="/part?name=小传">朋友-小传</router-link> <router-link to="/part/小智">朋友-小智</router-link>
总结:
?key=value 用$route.query.key 取值
/值 提前在路由规则/path/:key 用$route.params.key 取值
3. vue路由 - 重定向和模式
3.0 路由 - 重定向
目标: 匹配path后, 强制切换到目标path上
- 网页打开url默认hash值是/路径
- redirect是设置要重定向到哪个路由路径
例如: 网页默认打开, 匹配路由"/", 强制切换到"/find"上
const routes = [
{
path: "/", // 默认hash值路径
redirect: "/find" // 重定向到/find
// 浏览器url中#后的路径被改变成/find-重新匹配数组规则
}
]
总结: 强制重定向后, 还会重新来数组里匹配一次规则
3.1 路由 - 404页面
目标: 如果路由hash值, 没有和数组里规则匹配