AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

《vue2进阶篇：路由》第10章：vue-router，包括基础路由、嵌套路由、路由的query参数和params参数、命名路由、router-link的replace属性、编程式路由、缓存路由组件

2024-10-13 41
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 《vue2进阶篇：路由》第10章：vue-router，包括基础路由、嵌套路由、路由的query参数和params参数、命名路由、router-link的replace属性、编程式路由、缓存路由组件

image.png

@[toc]

vue-router

一、普通html使用“路由”

随着（SPA）单页应用的不断普及，前后端开发分离，目前项目基本都使用前端路由，在项目使用期间页面不会重新加载。

SEO：一般指搜索引擎优化。

优点：
1、用户体验好，和后台网速没有关系，不需要每次都从服务器全部获取，界面展现快。
2、可以再浏览器中输入指定想要访问的url路径地址。
3、实现了前后端的分离，方便开发。有很多框架都带有路由功能模块。
缺点：
1、对SEO不是很友好
2、在浏览器前进和后退时候重新发送请求，没有合理缓存数据。
3、初始加载时候由于加载所有模块渲染，会慢一点。

1)手动实现路由

前端路由目前主要有两种方法：
1）利用url的hash,就是常用的锚点（#）操作，类似页面中点击某小图标，返回页面顶部，JS通过hashChange事件来监听url的改变，IE7及以下需要轮询进行实现。一般常用框架的路由机制都是用的这种方法，例如Angualrjs自带的ngRoute和二次开发模块ui-router，react的react-route,vue-route…
2）利用HTML5的History模式，使url看起来类似普通网站，以”/”分割，没有”#”，但页面并没有跳转，不过使用这种模式需要服务器端的支持，服务器在接收到所有的请求后，都指向同一个html文件，通过historyAPI，监听popState事件，用pushState和replaceState来实现。

由于使用hash方法能够兼容低版本的IE浏览器，简单的的自己搭建前端路由。

举例：实现点击不同标签跳转不同页

说明：

第一步：定义函数

第二步：定义路由切换

第三步：定义dom配置#地址

执行流程：点击a标签 =》 根据#后面的路径调用路由切换Router.route =》 调用具体方法changePage()

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义路由</title>
    <script>
        function Router() {
   
            this.routes = {
   };
            this.currentUrl = '';
        }
        //route 存储路由更新时的回调到回调数组routes中，回调函数将负责对页面的更新
        Router.prototype.route = function (path, callback) {
   
            this.routes[path] = callback || function () {
    };
        };
        //refresh 执行当前url对应的回调函数，更新页面
        Router.prototype.refresh = function () {
   
            this.currentUrl = location.hash.slice(1) || '/';
            this.routes[this.currentUrl]();
        };
        //init 监听浏览器 url hash 更新事件
        Router.prototype.init = function () {
   
            //load事件在当前页面加载时触发
            window.addEventListener('load', this.refresh.bind(this), false);
            //hashchange事件在当前页面URL中的hash值发生改变时触发
            window.addEventListener('hashchange', this.refresh.bind(this), false);
        };
        window.Router = new Router();
        window.Router.init();
    </script>
    <title></title>
</head>
<body>
<ul>
    <li><a href="#/">首页</a></li>
    <li><a href="#/home">主页</a></li>
    <li><a href="#/detail">详情页</a></li>
</ul>
<div id="page"></div>
<script>
    var body = document.querySelector('body');
    //切换hash的事件
    function changePage(page) {
   
        document.querySelector('#page').innerHTML = page;
    }
    //切换
    Router.route('/', function () {
   
        changePage('这是首页');
    });
    Router.route('/home', function () {
   
        changePage('这是主页');
    });
    Router.route('/detail', function () {
   
        changePage('这是详情页');
    });
</script>
</body>
</html>

结果展示

image.png

2 )vue-router

vue-router是Vue官方提供的路由，用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

使用说明：

  1. 引入vue.js和vue-router.js，且引入位置vue.js必须在vue-router.js上面加载
  2. 定义（路由）组件。
  3. 定义路由映射关系
  4. 创建 router 实例
  5. 创建vue实例并挂载router
  6. 使用 router-link 组件，最后一定要配置路由出口\

    举例：使用vue-route实现导航跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router</title>
    <script src="../vue.js"></script>
    <script type="text/javascript" src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <h3>Hello App!</h3>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/index">Go to index</router-link>
        <router-link to="/news">Go to news</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
<script>
    // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来
    const Index = {
    template: '<div>首页</div>' }
    const News = {
    template: '<div>新闻页</div>' }

    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    const routes = [
        {
    path: '/index', component: Index },
        {
    path: '/news', component: News }
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
   
        routes // （缩写）相当于 routes: routes
    })
    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
   
        router
    }).$mount('#app');
    // 现在，应用已经启动了！
</script>
</body>
</html>

结果展示

image.png

3)参数路由

通过路由可以传递参数，在使用时用:参数名的形式定义路由参数
通过\$route.params获取路由参数：/user/12
通过\$route.query获取问号？后面查询参数：name=cat

举例：路由传参并实现打印输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router</title>
    <script src="../vue.js"></script>
    <script type="text/javascript" src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <h3>Hello App!</h3>
    <p>
        <router-link to="/user/12?name=cat">User12</router-link>
    </p>
    <router-view></router-view>
</div>
<script>
    // 1. 定义（路由）组件。
    const User = {
    template: '<div>用户: {
   { $route.params.id }}-{
   { $route.query.name }}</div>' };

    // 2. 定义动态路由
    const routes = [
        // 动态路径参数 以冒号开头
        {
    path: '/user/:id', component: User }
    ];

    // 3. 创建 router 实例
    const router = new VueRouter({
   
        routes
    });
    // 4. 创建和挂载根实例
    const app = new Vue({
   
        router
    }).$mount('#app');
    // 现在，应用已经启动了！
</script>
</body>
</html>

结果展示

image.png

二、脚手架创建vue项目使用“路由”

相关理解

10.1.1vue-router的理解

vue 的一个插件库，专门用来实现 SPA 应用

10.1.2对SPA应用的理解

  1. 单页 Web 应用（single page web application，SPA）。
  2. 整个应用只有一个完整的页面。
  3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
  4. 数据需要通过 ajax 请求获取。

10.1.3 路由的理解

image.png
image.png
image.png
image.png

1. 什么是路由
  1. 一个路由就是一组映射关系（key - value） ，多个路由需要路由器（router）进行管理。
  2. key 为路径, value 可能是 function 或 component

image.png

2. 路由分类

1.后端路由：

1) 理解：value 是 function, 用于处理客户端提交的请求。
2) 工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求, 返回响应数据。

2.前端路由：

1) 理解：value 是 component，用于展示页面内容。
2) 工作过程：当浏览器的路径改变时, 对应的组件就会显示。

本人其他相关文章链接

1.《vue2进阶篇：路由》第10章：vue-router，包括基础路由、嵌套路由、路由的query参数和params参数、命名路由、router-link的replace属性、编程式路由、缓存路由组件
2.vue2进阶篇：安装路由
3.vue2进阶篇：vue-router之基础路由
4.vue2进阶篇：vue-router之嵌套（多级）路由
5.vue2进阶篇：vue-router之路由的query参数
6.vue2进阶篇：vue-router之命名路由
7.vue2进阶篇：vue-router之路由的params参数
8.vue2进阶篇：vue-router之路由的props配置
9.vue2进阶篇：vue-router之router-link的replace属性
10.vue2进阶篇：vue-router之编程式路由导航
11.vue2进阶篇：vue-router之缓存路由组件
12.vue2进阶篇：vue-router之两个新的生命周期钩子
13.vue2进阶篇：vue-router之使用“全局路由守卫”
14.vue2进阶篇：vue-router之“使用独享路由守卫”
15.vue2进阶篇：vue-router之“使用组件内路由守卫”
16.vue2进阶篇：vue-router之路由的2种工作模式

文章标签：
JavaScript
缓存
前端开发
SEO
移动开发
关键词：
缓存组件
编程缓存
路由replace编程缓存组件
vue-router缓存组件
路由缓存
刘大猫.
目录
相关文章
邹荣乐
|
23天前
|
缓存 JavaScript 搜索推荐
vue中的一个内置组件Keep-Alive的作用及使用方法介绍——缓存不活动的组件实例
vue中的一个内置组件Keep-Alive的作用及使用方法介绍——缓存不活动的组件实例
邹荣乐
69 1
a游苏杭
|
10天前
|
存储 缓存 JavaScript
1.Vue的缓存组件 | 详解KeepAlive
1.Vue的缓存组件 | 详解KeepAlive
a游苏杭
30 2
bruce刘晓伟-18435
|
1月前
|
存储 缓存 NoSQL
数据的存储--Redis缓存存储（一）
数据的存储--Redis缓存存储（一）
bruce刘晓伟-18435
72 1
bruce刘晓伟-18435
|
1月前
|
存储 缓存 NoSQL
数据的存储--Redis缓存存储（二）
数据的存储--Redis缓存存储（二）
bruce刘晓伟-18435
46 2
数据的存储--Redis缓存存储（二）
东方睿赢
|
1月前
|
消息中间件 缓存 NoSQL
Redis 是一个高性能的键值对存储系统，常用于缓存、消息队列和会话管理等场景。
【10月更文挑战第4天】Redis 是一个高性能的键值对存储系统，常用于缓存、消息队列和会话管理等场景。随着数据增长，有时需要将 Redis 数据导出以进行分析、备份或迁移。本文详细介绍几种导出方法：1）使用 Redis 命令与重定向；2）利用 Redis 的 RDB 和 AOF 持久化功能；3）借助第三方工具如 `redis-dump`。每种方法均附有示例代码，帮助你轻松完成数据导出任务。无论数据量大小，总有一款适合你。
东方睿赢
67 6
dream_ready
|
1月前
|
缓存 NoSQL 关系型数据库
redis和缓存及相关问题和解决办法 什么是缓存预热、缓存穿透、缓存雪崩、缓存击穿
本文深入探讨了Redis缓存的相关知识，包括缓存的概念、使用场景、可能出现的问题（缓存预热、缓存穿透、缓存雪崩、缓存击穿）及其解决方案。
dream_ready
159 0
redis和缓存及相关问题和解决办法 什么是缓存预热、缓存穿透、缓存雪崩、缓存击穿
喵帕斯先生
|
8天前
|
缓存 NoSQL Redis
Redis 缓存使用的实践
《Redis缓存最佳实践指南》涵盖缓存更新策略、缓存击穿防护、大key处理和性能优化。包括Cache Aside Pattern、Write Through、分布式锁、大key拆分和批量操作等技术，帮助你在项目中高效使用Redis缓存。
喵帕斯先生
64 22
Ly001122
|
7天前
|
缓存 NoSQL 中间件
redis高并发缓存中间件总结！
本文档详细介绍了高并发缓存中间件Redis的原理、高级操作及其在电商架构中的应用。通过阿里云的角度，分析了Redis与架构的关系，并展示了无Redis和使用Redis缓存的架构图。文档还涵盖了Redis的基本特性、应用场景、安装部署步骤、配置文件详解、启动和关闭方法、systemctl管理脚本的生成以及日志警告处理等内容。适合初学者和有一定经验的技术人员参考学习。
Ly001122
62 7
mao29955
|
11天前
|
存储 缓存 监控
利用 Redis 缓存特性避免缓存穿透的策略与方法
【10月更文挑战第23天】通过以上对利用 Redis 缓存特性避免缓存穿透的详细阐述，我们对这一策略有了更深入的理解。在实际应用中，我们需要根据具体情况灵活运用这些方法，并结合其他技术手段，共同保障系统的稳定和高效运行。同时，要不断关注 Redis 缓存特性的发展和变化，及时调整策略，以应对不断出现的新挑战。
mao29955
41 10
mao29955
|
11天前
|
缓存 监控 NoSQL
Redis 缓存穿透的检测方法与分析
【10月更文挑战第23天】通过以上对 Redis 缓存穿透检测方法的深入探讨，我们对如何及时发现和处理这一问题有了更全面的认识。在实际应用中，我们需要综合运用多种检测手段，并结合业务场景和实际情况进行分析，以确保能够准确、及时地检测到缓存穿透现象，并采取有效的措施加以解决。同时，要不断优化和改进检测方法，提高检测的准确性和效率，为系统的稳定运行提供有力保障。
mao29955
41 5

热门文章

最新文章

  • 1
    如何清除应用程序承载 WebBrowser 控件时缓存
  • 2
    hibernate注解方式的二级缓存
  • 3
    Ehcache 整合Spring 使用页面、对象缓存
  • 4
    一个实用的PHP缓存类
  • 5
    Oracle查询结果集无法被redis缓存序列化问题
  • 6
    nginx反代varnish缓存服务器实现后端amp动静分离架构
  • 7
    Spring Security（07）——缓存UserDetails
  • 8
    Hibernate缓存和ehcache
  • 9
    memcached数据库缓存
  • 10
    Enterprise Library 4.1学习笔记4----缓存应用程序块
  • 1
    高并发场景下，到底先更新缓存还是先更新数据库？
    59
  • 2
    C++一分钟之-缓存行与伪共享问题
    39
  • 3
    Java面试题：给出代码优化的常见策略，如减少对象创建、使用缓存等。
    59
  • 4
    Java面试题：结合设计模式与并发工具包实现高效缓存；多线程与内存管理优化实践；并发框架与设计模式在复杂系统中的应用
    54
  • 5
    Java面试题：结合单例模式与Java内存模型，设计一个线程安全的单例类？使用内存屏障与Java并发工具类，实现一个高效的并发缓存系统？结合观察者模式与Java并发框架，设计一个可扩展的事件处理系统
    38
  • 6
    Java面试题：如何通过JVM参数调整GC行为以优化应用性能？如何使用synchronized和volatile关键字解决并发问题？如何使用ConcurrentHashMap实现线程安全的缓存？
    41
  • 7
    基于Netty的自研流系统缓存实现挑战: 内存碎片与OOM困境
    52
  • 8
    在Spring Boot中实现分布式缓存策略
    75
  • 9
    使用Redis实现缓存穿透的解决方案
    47
  • 10
    使用Redis实现缓存穿透的解决方案
    82

    • 相关电子书

    更多
  • 基于英特尔 SSD 的虚拟机缓存解决SSD
  • 用户态高速块缓存方案
  • 高性能Web架构之缓存体系
    • 下一篇
    DataWorks售前咨询