路由 & 组件缓存

最新推荐文章于 2024-05-14 11:56:41 发布

程序员校花

最新推荐文章于 2024-05-14 11:56:41 发布

阅读量216

点赞数

分类专栏：有基础学Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/IPAD2030/article/details/131868180

版权

有基础学Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

SPA

在这里插入图片描述

单页面应用（SPA）：所有功能在一个 html 页面上实现
单页面应用程序，之所以开发效率高，性能高，用户体验好，最大的原因就是页面按需更新
在 vue 中，要按需更新就需要明确路径和组件的映射关系，即路由

VueRouter

VueRouter 是 Vue 官方的一个路由插件，是一个第三方包

使用步骤如下（ 5 + 2 ）：

5 个固定的基础步骤

下载 VueRouter 模块到当前工程
```
yarn add vue-router@3.6.5
```
引入
```
import VueRouter from 'vue-router'
```
安装注册
```
Vue.use(VueRouter)
```
创建路由对象
```
const router = new VueRouter()
```

注入，将路由对象注入到 new Vue 实例中，建立关联

new Vue({
    render: h => h(App),
    router: router
}).$mount('#app')

2 个核心步骤

在 router 对象中配置路由规则

const router = new VueRouter({
    routes:[
        { path: '/find', component: Find },
        { path: '/friend', component: Friend },
        { path: '/my', component: My },
    ]
})

配置导航和路由出口（路径匹配的组件显示的位置 <router-view></router-view>）

<template>
  <div>
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/friend">朋友</a>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

组件存放目录问题：组件分为页面组件和复用组件，目的是更容易维护，其中页面组件里面也可能会有复用组件，本质都是 .vue 文件

src / views 文件夹：页面组件，配合路由用
src / components 文件夹：复用组件

声明式导航

导航链接

vue-router 提供了一个全局组件 router-link（取代 a 标签）：

能跳转，必须配置 to 属性指定路径，本质还是 a 标签，to 无需 #
能高亮，默认会提供高亮类名（ router-link-active 和 router-link-exact-active ），可以在 <style> 中直接设置高亮样式
- router-link-active：模糊匹配，用的多，例如 to=“/my” 可以匹配 /my、/my/a 、/my/b
- router-link-exact-active：精确匹配，to=“/my” 仅可以匹配 /my

示例代码如下：

<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.footer_wrap a.router-link-active {
  background-color: skyblue;
}
</style>

自定义高亮类名

在路由对象中配置自定义高亮类名：

在这里插入图片描述

路由传参

查询参数传参

语法格式：to="/path?参数名=值"
对应组件接收：
- 模板字符串：{{ $route.query }}
- js 代码：this.$route.query

动态路由传参

配置动态路由

const router = new VueRouter({
    routes: [
        ...,
        {
            path: '/search/:参数名',
            component: Search
        }
    ]
})

配置导航链接：to="/path/参数值"
对应组件接收：
- 模板字符串：{{ $route.params.参数名 }}
- js 代码：this.$route.params.参数名

配了路由 path: "/search/:words"，表示必须要传参数，如果不传则匹配不到对应组件，可以加可选符 ?，表示不传参数也能进行匹配，示例代码如下：

const router = new VueRouter({
    routes: [
        { path: '/home', component: Home },
        { path: '/search/:words?', component: Search }
    ]
})

查询参数传参适合传多个参数
动态路由传参适合传单个参数

路由重定向

重定向

网页打开， url 默认是 / 路径，此时如果未匹配到组件，会出现空白
语法：{ path: 匹配路径, redirect: 重定向到的路径 }
示例代码如下：

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
  ]
})

404

作用：当路径找不到匹配时，给个提示页面
位置：配在路由最后，前面都不匹配就命中最后这个
示例代码如下：

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { path: '*', component: NotFound }
  ]
})

模式设置

路由的路径默认使用 hash 路由，有 #，可以切换成无 # 模式：

hash 路由（默认），例如：http://localhost:8080/#/home
history 路由（常用），例如：http://localhost:8080/home

示例代码如下：

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/home', component: Home },
  ]
})

hash 路由中 URL 不会被发送到服务器端，因此在服务器端不需要进行额外的配置来处理前端路由

history 路由中 URL 中是真实的路径，服务器会根据该路径尝试寻找对应的资源文件，但由于前端路由是由 Vue.js 管理的，这些路由对应的资源文件实际上不存在，于是服务器返回 404 错误，所以需要在后端进行额外配置

后端处理方案：

对于前端单页应用（SPA），服务器将所有请求都重定向到前端的主页面（通常是 index.html）是为了让前端应用能够接管路由处理，展示对应的页面内容。但同时，需要特别处理接口请求，以确保接口能够正常返回数据

编程式导航

编程式导航：用 JS 代码来进行跳转，两种语法：

path 路径跳转
name 命名路由跳转

path 跳转

示例代码如下：

this.$router.push('路由路径')
// 完整写法
// this.$router.push({
//   path: '/search'
// })

name 跳转

通过路由的名字进行跳转，前提是定义路由时要配置 name，适合路由路径长的场景：

定义路由 name：

const router = new VueRouter({
    mode: 'history',
    routes: [
        {name: 's', path: '/search', component: Search},
    ]
})

通过路由 name 进行跳转：

this.$router.push({
    path: '/search',
    name: 's'
})

路由传参

两种传参方式，对于两种跳转方式都支持：

query 传参
动态路由传参，需要配置动态路由

接收方式同声明式导航

query 传参

path 跳转：

this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
// 两种写法都可以
this.$router.push({
    path: '/路径',
    query: {
        参数名1: '参数值1',
        参数名2: '参数值2'
    }
})

name 跳转：

this.$router.push({
    name: '路由名字',
    query: {
        参数名1: '参数值1',
        参数名2: '参数值2'
    }
})

动态路由传参

path 跳转：

this.$router.push('/路径/参数值')
// 两种写法都可以
this.$router.push({
    path: '/路径/参数值'
})

name 跳转：

this.$router.push({
    name: '路由名字',
    params: {
        参数名: '参数值',
    }
})

组件缓存

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
keep-alive 是一个抽象组件，它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中
使用场景：在组件切换过程中把切换走的组件保留在内存中，防止重复渲染 DOM，减少加载时间及性能消耗，提高用户体验性

属性

include：组件名数组，只有匹配的组件会被缓存
exclude：组件名数组，任何匹配的组件都不会被缓存
max：最多可以缓存多少组件实例

示例代码如下：

<div class="h5-wrapper">
  <keep-alive :include="keepArr">
    <router-view></router-view>
  </keep-alive>
</div>

生命周期函数

keep-alive 的使用会触发两个生命周期函数：

activated：当组件**被激活（使用）**的时候触发，即进入这个页面的时候触发
deactivated：当组件不被使用的时候触发，即离开这个页面的时候触发

组件缓存后就不会执行组件的 created、mounted、destroyed 等钩子了

程序员校花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
路由 & 组件缓存

VueRou引入安装注册创建路由对象注入，将路由对象注入到实例中，建立关联2 个核心步骤在对象中配置路由规则配置导航和路由出口（路径匹配的组件显示的位置）声明式导航导航链接vue-router 提供了一个全局组件（取代 a 标签）：能跳转，必须配置属性指定路径，本质还是 a 标签，无需
复制链接

扫一扫