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

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

2024-10-13 49
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 《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缓存组件
路由缓存
刘大猫.
目录
相关文章
邹荣乐
|
2月前
|
缓存 JavaScript 搜索推荐
vue中的一个内置组件Keep-Alive的作用及使用方法介绍——缓存不活动的组件实例
vue中的一个内置组件Keep-Alive的作用及使用方法介绍——缓存不活动的组件实例
邹荣乐
127 1
武子康
|
2月前
|
存储 缓存 分布式计算
大数据-89 Spark 集群 RDD 编程-高阶 编写代码、RDD依赖关系、RDD持久化/缓存
大数据-89 Spark 集群 RDD 编程-高阶 编写代码、RDD依赖关系、RDD持久化/缓存
武子康
46 4
刘大猫.
|
2月前
|
缓存
vue2进阶篇：vue-router之缓存路由组件
vue2进阶篇：vue-router之缓存路由组件
刘大猫.
36 1
bruce_xiaowei
|
2月前
|
存储 缓存 NoSQL
数据的存储--Redis缓存存储（一）
数据的存储--Redis缓存存储（一）
bruce_xiaowei
95 1
bruce_xiaowei
|
2月前
|
存储 缓存 NoSQL
数据的存储--Redis缓存存储（二）
数据的存储--Redis缓存存储（二）
bruce_xiaowei
51 2
数据的存储--Redis缓存存储（二）
东方睿赢
|
2月前
|
消息中间件 缓存 NoSQL
Redis 是一个高性能的键值对存储系统，常用于缓存、消息队列和会话管理等场景。
【10月更文挑战第4天】Redis 是一个高性能的键值对存储系统，常用于缓存、消息队列和会话管理等场景。随着数据增长，有时需要将 Redis 数据导出以进行分析、备份或迁移。本文详细介绍几种导出方法：1）使用 Redis 命令与重定向；2）利用 Redis 的 RDB 和 AOF 持久化功能；3）借助第三方工具如 `redis-dump`。每种方法均附有示例代码，帮助你轻松完成数据导出任务。无论数据量大小，总有一款适合你。
东方睿赢
78 6
dream_ready
|
2月前
|
缓存 NoSQL 关系型数据库
redis和缓存及相关问题和解决办法 什么是缓存预热、缓存穿透、缓存雪崩、缓存击穿
本文深入探讨了Redis缓存的相关知识，包括缓存的概念、使用场景、可能出现的问题（缓存预热、缓存穿透、缓存雪崩、缓存击穿）及其解决方案。
dream_ready
199 0
redis和缓存及相关问题和解决办法 什么是缓存预热、缓存穿透、缓存雪崩、缓存击穿
mikechen的互联网架构
|
27天前
|
缓存 NoSQL 关系型数据库
大厂面试高频：如何解决Redis缓存雪崩、缓存穿透、缓存并发等5大难题
本文详解缓存雪崩、缓存穿透、缓存并发及缓存预热等问题，提供高可用解决方案，帮助你在大厂面试和实际工作中应对这些常见并发场景。关注【mikechen的互联网架构】，10年+BAT架构经验倾囊相授。
mikechen的互联网架构
67 6
大厂面试高频：如何解决Redis缓存雪崩、缓存穿透、缓存并发等5大难题
赵渝强老师
|
28天前
|
存储 缓存 NoSQL
【赵渝强老师】基于Redis的旁路缓存架构
本文介绍了引入缓存后的系统架构，通过缓存可以提升访问性能、降低网络拥堵、减轻服务负载和增强可扩展性。文中提供了相关图片和视频讲解，并讨论了数据库读写分离、分库分表等方法来减轻数据库压力。同时，文章也指出了缓存可能带来的复杂度增加、成本提高和数据一致性问题。
赵渝强老师
44 4
【赵渝强老师】基于Redis的旁路缓存架构
喵帕斯先生
|
1月前
|
缓存 NoSQL Redis
Redis 缓存使用的实践
《Redis缓存最佳实践指南》涵盖缓存更新策略、缓存击穿防护、大key处理和性能优化。包括Cache Aside Pattern、Write Through、分布式锁、大key拆分和批量操作等技术，帮助你在项目中高效使用Redis缓存。
喵帕斯先生
195 22