前端路由的概念与原理
什么是前端路由
- Hash 地址与组件之间的映射关系，前端路由可以将hash地址和组件关联起来
- Hash地址就可以先简单的理解为一个url地址
- 可以发现，不管是后台路由还是前端路由，都是一种映射关系
- 后台路由是请求地址(方式)和处理函数之间的映射关系
- 前端路由是hash地址和组件之间的映射关系
前端路由的工作方式
- 用户点击了页面上的路由链接
- 导致了 URL 地址栏中的 Hash 值发生了变化
- 前端路由监听了到 Hash 地址的变化
- 前端路由把当前 Hash 地址对应的组件渲染都浏览器中
实现一个简易版本的路由
基本步骤
-
创建三个组件用于测试
- 导入并注册这三个组件
<script>
import about from "./about";
import home from "./home";
import movie from "./movie";
export default {
components: {
about,
home,
movie,
},
};
</script>
- 添加动态组件，用于控制当前组件的显示
<component :is="comName"></component>
data() {
return {
comName: "",
};
},
- 添加三个超链接，注意设置href为锚链接
<template>
<div>
<a href="#/home">home</a>
<a href="#/movie">movie</a>
<a href="#/about">about</a>
<component :is="comName"></component>
</div>
</template>
- 为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介绍
- Vue Router 是 Vue.js 官方的路由管理器
- 它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌,说白了，就是配合vue.js一起来实现单击应用开发的，它主要用来实现项目中的路由管理
- 我们需要做的是，将
组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们 - vue-router 目前有 3.x 的版本和 4.x 的版本。其中：
- vue-router 3.x 只能结合 vue2 进行使用
- vue-router 4.x 只能结合 vue3 进行使用
路由模块的创建
- 在项目中下载安装vue-router
npm install vue-router - 创建路由模块文件：router.js
- 引入
- 在模块化工程中明确的安装路由功能
- 创建路由对象
- 添加具体的路由配置：路由映射组件
- 暴露
// 这个文件就是当前项目中的路由管理文件
// 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
基本路由功能的实现
- 在main.js中引入路由模块
import router from '@/router/managerRouter'
- 注入路由
new Vue({
// 注入路由：让应用可以使用路由功能
router,
render: h => h(App),
}).$mount('#app')
- 在根组件中添加router-view
<!-- 设置路由映射组件的展示区域 -->
<router-view></router-view>
- 使用router-link添加超链接
<!-- 添加超链接 -->
<router-link to="/index">首页</router-link>
延迟加载组件
延迟加载：需要时才加载组件，而不是一开始就全部加载好,将代码块的加截推迟到需要的时候加载，从而使应用程序的初始包变得更小，达到节省性能的目的
// 异步加载 -- 延迟加载
component: () => import('../components/day6/router-demo/index.vue')
动态路由匹配
路由参数的设置和传递
动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。
- 动态路由参数的设置
- 使用场景：某种模式匹配到的所有路由，全都映射到同个组件
- “路由参数”使用冒号 : 标记
{
// 设置参数
path: '/index/:id',
name: 'index',
// component: index
// 异步加载 -- 延迟加载
component: () => import('../components/day6/router-demo/index.vue')
},
- 动态路由参数的匹配
<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 接收路由参数
- 为了简化路由参数的获取形式，vue-router 允许在路由规则中开启 props 传参
{
// 设置参数
path: '/index/:id',
name: 'index',
// component: index
// 在组件中，以props的形式接收路由规则所匹配的参数
props: true,
// 异步加载 -- 延迟加载
component: () => import('../components/day6/router-demo/index.vue')
},
- 在路由所映射的组件中使用props接收路由参数
export default {
// 接收路由匹配参数
props: ["id"],
}
监听路由参数的变化
- 当使用动态路由参数时，如果只是参数的变化，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效
- 意味着组件的生命周期钩子不会再被调用(mounted不会再触发)
- 我们可以watch (监测变化) $route 对象，以监听路由参数的变化
// 同一个路由参数变化时触发
watch: {
$route(to, from) {
// 对路由变化做出响应
...
},
},
