【Vue知识点- No7.】路由、vant组件库的使用

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>寻找伙伴