No7.路由、vant组件库的使用
学习目标
1.能够了解单页面应用概念和优缺点
2.能够掌握vue-router路由系统使用
3.能够掌握链接导航和编程式导航用法
4.能够掌握路由嵌套和路由守卫
5.能够掌握vant组件库基础使用
- url的组成部分都有哪些, hash值指的什么。
1. vue路由简介和基础使用
1.0 什么是路由
生活中的路由: 设备和ip的映射关系。
node.js路由:接口和服务的映射关系。
前端路由:路径和组件的映射关系。
总结:什么什么是路由?路由是一种映射关系。
1.1 为什么使用路由?
目标: 在一个页面里, 切换业务场景。
1.2 vue-router介绍
如何在Vue项目中集成路由?
路由官网:https://router.vuejs.org/zh/
1.3 路由 - 组件分类
注意: .vue文件分2类, 一个是页面组件, 一个是复用组件。
总结: 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">
<!--设置挂载点-当url的hash值路径切换,
显示规则里对应的组件到这里-->
<router-view></router-view>
</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>
vue-router文档:https://router.vuejs.org/zh/
- 安装:
yarn add vue-router 或者 npm i vue-router
- 在main.js中导入路由:
import VueRouter from 'vue-router'
- 使用路由插件(注册全局组件):
Vue.use(VueRouter)
在vue中,使用使用vue的插件,都需要调用Vue.use()。 - 创建路由规则数组:
const routes = [
{
path: "/find",
component: Find
},
{
path: "/my",
component: My
},
{
path: "/part",
component: Part
}
]
- 创建路由对象 - 传入规则:
const router = new VueRouter({
routes
// routes是固定的key(传入规则数组routes),key和value同名,简写。
})
- 将路由对象注入到vue实例中,让this可以访问
$route和$router
new Vue({
router, // router: router 简写
render: h => h(App),
}).$mount('#app')
- components换成router-view
<router-view></router-view>
- 准备在src/views文件夹下新建Find.vue、My.vue、Part.vue。然后在main.js文件中引入这些组件:
import Find from '@/views/Find'
这里的@
符号是webpack内部配置的别名,代表的就是src的绝对路径
。
总结1: 下载路由模块, 编写对应规则注入到 vue 实例上, 使用 router-view挂载点显示切换的路由。
总结2: 规则如何生效?切换url上hash值,开始匹配规则,对应组件展示到router-view位置上。
2. vue路由 - 声明式导航
2.0 基础使用
<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是什么?VueRouter在全局注册的组件,本质就是a;②链接导航, 用router-link配合to, 实现点击切换路由。③【好处】:router-link自带高亮的类名
(激活时的类名)。
2.1 跳转传参
目标: 在跳转路由时, 可以给路由对应的组件内传值。
在router-link上的to属性传值, 语法格式如下:
to="/path?参数名=值"
to="/path/值"
– 需要路由对象提前配置 path: “/path/参数名”
对应页面组件接收传递过来的值:
-
$route.query.参数名
-
$route.params.参数名
-
创建components/Part.vue - 准备接收路由上传递的参数和值:
<template>
<div>
<p>关注明星</p>
<p>发现精彩</p>
<p>寻找伙伴