路由_vant组件库使用

知识点自测

• url的组成部分都有哪些, hash值指的什么

今日学习目标

1. 能够了解单页面应用概念和优缺点
2. 能够掌握vue-router路由系统使用
3. 能够掌握链接导航和编程式导航用法
4. 能够掌握路由嵌套和路由守卫
5. 能够掌握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>

vue-router文档

• 安装

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标签

1. vue-router提供了一个全局组件 router-link
2. router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)
3. 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.参数名

1. 创建components/Part.vue - 准备接收路由上传递的参数和值

   <template>
     <div>
         <p>关注明星</p>
         <p>发现精彩</p>
         <p>寻找伙伴</p>
         <p>加入我们</p>
         <p>人名: {
       { $route.query.name }} -- {
       { $route.params.username }}</p>
     </div>
   </template>
   

2. 路由定义

   {
        
       path: "/part",
       component: Part
     },
     {
        
       path: "/part/:username", // 有:的路径代表要接收具体的值
       component: Part
     },
   

3. 导航跳转, 传值给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值, 没有和数组里规则匹配