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

简介: 《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种工作模式

目录
相关文章
|
12天前
|
缓存 JavaScript 搜索推荐
vue中的一个内置组件Keep-Alive的作用及使用方法介绍——缓存不活动的组件实例
vue中的一个内置组件Keep-Alive的作用及使用方法介绍——缓存不活动的组件实例
50 1
|
3天前
|
存储 缓存 JavaScript
1.Vue的缓存组件 | 详解KeepAlive
1.Vue的缓存组件 | 详解KeepAlive
13 3
|
20天前
|
存储 缓存 分布式计算
大数据-89 Spark 集群 RDD 编程-高阶 编写代码、RDD依赖关系、RDD持久化/缓存
大数据-89 Spark 集群 RDD 编程-高阶 编写代码、RDD依赖关系、RDD持久化/缓存
40 4
|
24天前
|
缓存
vue2进阶篇:vue-router之缓存路由组件
vue2进阶篇:vue-router之缓存路由组件
29 1
|
24天前
|
存储 缓存 NoSQL
数据的存储--Redis缓存存储(一)
数据的存储--Redis缓存存储(一)
58 1
|
24天前
|
存储 缓存 NoSQL
数据的存储--Redis缓存存储(二)
数据的存储--Redis缓存存储(二)
37 2
数据的存储--Redis缓存存储(二)
|
20天前
|
消息中间件 缓存 NoSQL
Redis 是一个高性能的键值对存储系统,常用于缓存、消息队列和会话管理等场景。
【10月更文挑战第4天】Redis 是一个高性能的键值对存储系统,常用于缓存、消息队列和会话管理等场景。随着数据增长,有时需要将 Redis 数据导出以进行分析、备份或迁移。本文详细介绍几种导出方法:1)使用 Redis 命令与重定向;2)利用 Redis 的 RDB 和 AOF 持久化功能;3)借助第三方工具如 `redis-dump`。每种方法均附有示例代码,帮助你轻松完成数据导出任务。无论数据量大小,总有一款适合你。
55 6
|
25天前
|
缓存 NoSQL 关系型数据库
redis和缓存及相关问题和解决办法 什么是缓存预热、缓存穿透、缓存雪崩、缓存击穿
本文深入探讨了Redis缓存的相关知识,包括缓存的概念、使用场景、可能出现的问题(缓存预热、缓存穿透、缓存雪崩、缓存击穿)及其解决方案。
122 0
redis和缓存及相关问题和解决办法 什么是缓存预热、缓存穿透、缓存雪崩、缓存击穿
|
1天前
|
存储 缓存 监控
利用 Redis 缓存特性避免缓存穿透的策略与方法
【10月更文挑战第23天】通过以上对利用 Redis 缓存特性避免缓存穿透的详细阐述,我们对这一策略有了更深入的理解。在实际应用中,我们需要根据具体情况灵活运用这些方法,并结合其他技术手段,共同保障系统的稳定和高效运行。同时,要不断关注 Redis 缓存特性的发展和变化,及时调整策略,以应对不断出现的新挑战。
19 10
|
1天前
|
缓存 监控 NoSQL
Redis 缓存穿透的检测方法与分析
【10月更文挑战第23天】通过以上对 Redis 缓存穿透检测方法的深入探讨,我们对如何及时发现和处理这一问题有了更全面的认识。在实际应用中,我们需要综合运用多种检测手段,并结合业务场景和实际情况进行分析,以确保能够准确、及时地检测到缓存穿透现象,并采取有效的措施加以解决。同时,要不断优化和改进检测方法,提高检测的准确性和效率,为系统的稳定运行提供有力保障。
19 5