vue基础-路由（重要）

前端路由的概念与原理

什么是前端路由

1. Hash 地址与组件之间的映射关系，前端路由可以将hash地址和组件关联起来
2. Hash地址就可以先简单的理解为一个url地址
3. 可以发现，不管是后台路由还是前端路由，都是一种映射关系
   • 后台路由是请求地址(方式)和处理函数之间的映射关系
   • 前端路由是hash地址和组件之间的映射关系

前端路由的工作方式

1. 用户点击了页面上的路由链接
2. 导致了 URL 地址栏中的 Hash 值发生了变化
3. 前端路由监听了到 Hash 地址的变化
4. 前端路由把当前 Hash 地址对应的组件渲染都浏览器中

实现一个简易版本的路由

基本步骤

1. 创建三个组件用于测试

   
   

2. 导入并注册这三个组件

<script>
import about from "./about";
import home from "./home";
import movie from "./movie";
export default {
  components: {
    about,
    home,
    movie,
  },
};
</script>

3. 添加动态组件，用于控制当前组件的显示

<component :is="comName"></component>

  data() {
    return {
      comName: "",
    };
  },

4. 添加三个超链接，注意设置href为锚链接

<template>
  <div>
    <a href="#/home">home</a> &nbsp;&nbsp;
    <a href="#/movie">movie</a> &nbsp;&nbsp;
    <a href="#/about">about</a> &nbsp;&nbsp;
    <component :is="comName"></component>
  </div>
</template>

5. 为window添加onhashchange事件，监听hash值的变化

  // 钩子函数 页面一加载就监听
  mounted() {
    window.onhashchange = () => {
      if (location.hash == "#/home") {
        this.comName = "home";
      } else if (location.hash == "#/movie") {
        this.comName = "movie";
      } else if (location.hash == "#/about") {
        this.comName = "about";
      }
    };
  },

效果

vue中路由的基本使用流程

vue-router介绍

1. Vue Router 是 Vue.js 官方的路由管理器
2. 它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌,说白了，就是配合vue.js一起来实现单击应用开发的，它主要用来实现项目中的路由管理
3. 我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们
4. vue-router 目前有 3.x 的版本和 4.x 的版本。其中：
   • vue-router 3.x 只能结合 vue2 进行使用
   • vue-router 4.x 只能结合 vue3 进行使用

路由模块的创建

1. 在项目中下载安装vue-router
   npm install vue-router
2. 创建路由模块文件：router.js
3. 引入
4. 在模块化工程中明确的安装路由功能
5. 创建路由对象
6. 添加具体的路由配置：路由映射组件
7. 暴露

//  这个文件就是当前项目中的路由管理文件

// 1. 基于工程化-- 模块化
import Vue from 'vue'
import VueRouter from "router"
// 明确的安装路由功能
Vue.use(VueRouter)
// 引入路由映射所需要的组件
import index from '../components/router-demo/index.vue'
import about from '../components/router-demo/about.vue'

// 2.创建路由模块
const router = new VueRouter({
    // 3. 添加路由配置，通过routes可以添加配置，它是一个数组
    routes: [
        // 4. 添加一个一个的具体的路由配置，主要是实现，url地址（路由）的映射关系
        // 它是一个对象，常见的配置：
        // path：路由路径，如果 、login
        // component:所映射的组件对象 ---不是字符串
        {
            path: '/index',
            component: index
        },
        {
            path: '/about',
            component: about
        }
    ]
})

// 5. 暴露
export default router

基本路由功能的实现

1. 在main.js中引入路由模块

import router from '@/router/managerRouter'

2. 注入路由

new Vue({
  // 注入路由：让应用可以使用路由功能
  router,
  render: h => h(App),
}).$mount('#app')

3. 在根组件中添加router-view

<!-- 设置路由映射组件的展示区域 -->
<router-view></router-view>

4. 使用router-link添加超链接

<!-- 添加超链接 -->
<router-link to="/index">首页</router-link>

延迟加载组件

延迟加载：需要时才加载组件，而不是一开始就全部加载好,将代码块的加截推迟到需要的时候加载，从而使应用程序的初始包变得更小，达到节省性能的目的

// 异步加载 -- 延迟加载
component: () => import('../components/day6/router-demo/index.vue')

动态路由匹配

路由参数的设置和传递

动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。

1. 动态路由参数的设置
   • 使用场景：某种模式匹配到的所有路由，全都映射到同个组件
   • “路由参数”使用冒号 : 标记

        {
            // 设置参数
            path: '/index/:id',
            name: 'index',
            // component: index
            // 异步加载 -- 延迟加载
            component: () => import('../components/day6/router-demo/index.vue')
        },

2. 动态路由参数的匹配

<router-link to="/index/1"></router-link>

注意：
如果没有传递参数，则路由无法匹配
不用在传递参数的时候添加:了

获取路由参数

    // 通过$route获取路由参数
    // id:就是路由参数设置时的id
    // console.log(this.$route);
    // console.log(this.$route.params.id);
    let id = this.$route.params.id

使用 props 接收路由参数

1. 为了简化路由参数的获取形式，vue-router 允许在路由规则中开启 props 传参

{
    // 设置参数
    path: '/index/:id',
    name: 'index',
    // component: index
    // 在组件中，以props的形式接收路由规则所匹配的参数
    props: true,
    // 异步加载 -- 延迟加载
    component: () => import('../components/day6/router-demo/index.vue')
},

2. 在路由所映射的组件中使用props接收路由参数

export default {
  // 接收路由匹配参数
  props: ["id"],
  }

监听路由参数的变化

1. 当使用动态路由参数时，如果只是参数的变化，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效
2. 意味着组件的生命周期钩子不会再被调用(mounted不会再触发)
3. 我们可以watch (监测变化) $route 对象，以监听路由参数的变化

  //   同一个路由参数变化时触发
  watch: {
    $route(to, from) {
      // 对路由变化做出响应
      ...
    },
  },