Vue 0基础学习路线-对比React（17）—— 图解深度详述vue动态路由和路由对象的使用及详细案例（附详细案例代码解析过程及版本迭代过程）

最新推荐文章于 2020-12-19 07:10:03 发布
最新推荐文章于 2020-12-19 07:10:03 发布
阅读量250 收藏
点赞数
分类专栏： # Vue基础 文章标签： vue 动态路由 路由 路由对象 route
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013946061/article/details/107750704
版权

文章目录

1. 重点提炼

  • 动态路由
    • $router
    • $route

2. 动态路由

有的时候，我们需要把满足某种规则的路由全部匹配到同一个组件，比如不同的商品的 url

/item/1
/item/2
/item/3
...

我们不可能为每一个商品都定义一个独立的组件，而是把它们都映射到同一个组件，同时 url 后面的部分为动态变化的部分，我们会在设计路由的时候进行特殊的处理

...
{
  path: '/item/:itemId',
  name: 'item',
  component: Item
}
...

其中 :itemId 表示匹配的 url 中动态部分内容，如上面的 1,2,3 等，同时该值将被赋值给路由的变量 itemId

// home.vue
<template>
  <div class="home">
    <h2>商品列表</h2>
    <ul class="item-list">
      <li class="head">
          <span>名称</span>
          <span>价格</span>
          <span>操作</span>
      </li>
      <li v-for="item of items" :key="item.id">
          <span>
            <router-link :to='{name: "item", params:{itemId: item.id}}'>{{item.name}}</router-link>
          </span>
          <span>{{item.price|RMB}}</span>
          <span>
            <button>添加到购物车</button>
          </span>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
import {RMB} from '@/filters/RMB';
export default {
  name: 'home',
  data() {
    return {
      items: []
    }
  },
  filters: {
    RMB
  },
  created() {
    axios({
      url: '/api/items'
    }).then(res => {
      this.items = res.data;
    });
  }
}
</script>
<style>
ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.item-list li {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px dotted #333;
}
.item-list li.head {
    font-weight: bold;
}
.item-list li span {
    min-width: 200px;
}
</style>

2.1 example01

2.1.1 example01-1

希望把不同的商品显示出来，这块的例子与我们之前在React中演示的例子是差不多的，可以对比看看。

<template>
    <div>
        <!--        Home-->
        <h2>商品列表</h2>
        <ul class="item-list">
            <li class="head">
                <span>名称</span>
                <span>价格</span>
                <span>操作</span>
            </li>
            <li v-for="item of items" :key="item.id">
                <span>
                    <router-link :to="{name: 'item', params: {id: item.id}}">{{item.name}}</router-link>
                </span>
                <span>{{item.price}}</span>
                <span>
                    <button>添加到购物车</button>
                </span>
            </li>
        </ul>
    </div>
</template>

<script>
    import * as apis from '@/apis'

    export default {
        name: "Home",

        data() {
            return {
                items: []
            }
        },

        async created() {
            let rs = await apis.getItems();

            this.items = rs.data;
        }
    }
</script>

<style>
    ul {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    .item-list li {
        padding: 10px;
        display: flex;
        justify-content: space-between;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px dotted #333;
    }
    .item-list li.head {
        font-weight: bold;
    }
    .item-list li span {
        min-width: 200px;
    }
</style>

在这里插入图片描述

参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.78
Branch： branch05

commit description：a1.78（example01-1——商品列表框子）

tag：a1.78

2.1.2 example01-2

价格以分为单位，可以写一个过滤转换为元

这里用vue写一个过滤器（小迪就不再详述了，有问题请看之前的blog）

\app\src\filters\RMB.js

export function RMB(val, flag='￥') {
    return flag + ' ' + (val / 100).toFixed(2);
}

\app\src\views\Home.vue

<template>
    <div>
        <!--        Home-->
        <h2>商品列表</h2>
        <ul class="item-list">
            <li class="head">
                <span>名称</span>
                <span>价格</span>
                <span>操作</span>
            </li>
            <li v-for="item of items" :key="item.id">
                <span>
                    <router-link :to="{name: 'item', params: {id: item.id}}">{{item.name}}</router-link>
                </span>
                <span>{{item.price|RMB}}</span>
                <span>
                    <button>添加到购物车</button>
                </span>
            </li>
        </ul>
    </div>
</template>

<script>
    import * as apis from '@/apis'

    export default {
        name: "Home",

        data() {
            return {
                items: []
            }
        },

        async created() {
            let rs = await apis.getItems();

            this.items = rs.data;
        },

        // 局部过滤器引入，挂载到filters
        filters: {
            RMB
        }
    }
</script>

<style>
    ul {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    .item-list li {
        padding: 10px;
        display: flex;
        justify-content: space-between;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px dotted #333;
    }
    .item-list li.head {
        font-weight: bold;
    }
    .item-list li span {
        min-width: 200px;
    }
</style>

在这里插入图片描述

也可以设置美元符号：

<span>{{item.price|RMB('$')}}</span>

在这里插入图片描述

参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.79
Branch： branch05

commit description：a1.79（example01-2——设置过滤器）

tag：a1.79

3. 路由对象

vue-router 会在组件中添加（注入）两个属性

  • $router：做与当前路由无关的操作，如跳转页面
  • $route：与当前路由相关操作

3.1 $router 对象

该对象其实就是 new VueRouter(…) 得到的路由对象，通过该对象我们可以访问全局路由信息，调用路由下的方法，比如：go、back、push 等

3.2 $route 对象

通过该对象可以访问(当前url)与当前路由匹配的信息（保存当前路由相关信息）

3.2.1 $route.params

获取动态路由有关的信息

// item.vue
<template>
    <div>
        <template v-if="item">
            <h2>商品详情 - {{item.name}}</h2>
            <dt>ID</dt>
            <dd>{{item.id}}</dd>
            <dt>名称</dt>
            <dd>{{item.name}}</dd>
            <dt>价格</dt>
            <dd>{{item.price|RMB}}</dd>
        </template>
        <template v-else>
            <h2>没有该商品信息</h2>
        </template>
    </div>
</template>
<script>
import axios from 'axios';
import {RMB} from '@/filters/RMB';
export default {
    name: 'item',
    data() {
        return {
            item: null
        }
    },
    filters: {
        RMB
    },
    created() {
        let itemId = Number(this.$route.params.itemId);
        if (itemId) {
            axios({
                url: `/api/item/${itemId}`
            }).then(res => {
                this.item = res.data;
            }).catch(err=>{});
        }
    }
}
</script>

3.3 example02

实现点击跳转详情页 => 获取用户点击选项的id值，需要从$route对象中获取

3.3.1 example02-1

\app\src\views\Detail.vue

<template>
    <div>
        商品详情
    </div>
</template>

<script>

    export default {
        name: "Detail",

        async created() {
            let id = this.$route.params.id;
        }
    }
</script>

<style scoped>

</style>

增加路由页面

\app\src\router\index.js

let router = new VueRouter({
    mode: 'history',    // hash \  history
 
    // 存放了 url 与 组件的映射关系
    routes: [
        // 每一个对象就是一组url与组件的对应
        {
            path: '/',
            component: Home,
        },
        {
            path: '/about',
            component: About
        },
        {
            path: '/view/:id',
            component: Detail
        }
    ]
});

点击首页对应项，跳转详情的router-link

vue05\app\src\views\Home.vue

            <li v-for="item of items" :key="item.id">
                <span>
                    <router-link :to='"/view/" + item.id'>{{item.name}}</router-link>
                </span>
<!--                <span>{{item.price|RMB}}</span>-->
                <span>{{item.price|RMB('$')}}</span>
                <span>
                    <button>添加到购物车</button>
                </span>
            </li>

$route.params.id => 即可获取到id了。

在这里插入图片描述

参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.80
Branch： branch05

commit description：a1.80（example02-1——详情页框子）

tag：a1.80

3.3.2 example02-2

我们想在详情页获取数据，先拿到id再去找匹配（通过id发请求），路由对象（vue-router）提供了两个属性 =>

  • $router：做与当前路由无关的操作，如跳转页面 => 实际就是 new VueRouter 出来的实例对象。

    let router = new VueRouter({
    mode: 'history',    // hash \  history
 
    // 存放了 url 与 组件的映射关系
    routes: [
        // 每一个对象就是一组url与组件的对应
        {
            path: '/',
            component: Home,
        },
        {
            path: '/about',
            component: About
        },
        {
            path: '/view/:id',
            component: Detail
        }
    ]
});

  • $route：与当前路由相关操作（与当前url匹配）

通过$route可以获取当前id，跳转界面（全局性操作，与当前路由无关的操作）利用$router对象。

实际在React的router-dom中也有这两个东西，$router、$route <=> history、location

v-if根据 item是否有值，有的话就显示商品详情，否则显示没有该商品信息

\test01\app\src\views\Detail.vue

<template>
    <div>
        <!--        商品详情-->
        <template v-if="item">
            <h2>商品详情 - {{item.name}}</h2>
            <dt>ID</dt>
            <dd>{{item.id}}</dd>
            <dt>名称</dt>
            <dd>{{item.name}}</dd>
            <dt>价格</dt>
            <dd>{{item.price|RMB}}</dd>
        </template>
        <template v-else>
            <h2>没有该商品信息</h2>
        </template>
    </div>
</template>

<script>
    import {RMB} from "@/filters/RMB";

    export default {
        name: "Detail",

        data() {
            return {
                item: null
            }
        },

        filters: {
            RMB
        },

        async created() {
            let id = this.$route.params.id;
        }
    }
</script>

<style scoped>

</style>

还未id请求，因此没有商品信息。

在这里插入图片描述

配置后台的请求url

\app\src\apis\URLS.js

export default {
    'ITEMS': '/api/items',
    'ITEM': '/api/item'
}

\app\src\apis\index.js

import axios from 'axios'
import URLS from './URLS'

export async function getItems() {
    let rs = await axios({
        url: URLS.ITEMS
    });

    return rs;
}


export async function getItem(id) {

    let rs = await axios({
        url: URLS.ITEM + '/' + id
    });

    return rs;
}

我们在created生命周期下发送请求，vue的生命周期请参考小迪的blog参考

\app\src\views\Detail.vue

    import * as apis from '@/apis'
    import {RMB} from "@/filters/RMB";

    export default {
        name: "Home",

        data() {
            return {
                items: []
            }
        },

        async created() {
            let id = this.$route.params.id;

            let rs = await apis.getItem(id);

            this.item = rs.data;
        },

        // 局部过滤器引入，挂载到filters
        filters: {
            RMB
        }
    }

http://localhost:8080/view/4

在这里插入图片描述

在这里插入图片描述

参考：https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a1.81
Branch： branch05

commit description：a1.81（example02-2——实现详情页请求）

tag：a1.81

以上就是动态路由，和react是一样思路，可能写法有些不同。



（后续待补充）
溜_x_i_a_o_迪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
编码问题一网打尽
wangjieest的专栏
10-22 1万+
字符集与编码问题小结 大部分内容copy自网络，我只是整理在一起 2012/10/11 编码的引入 ASCII 有人用 0x41 代表a，有人用 0x81 表示。语言不通，不同的计算机无法交流。美国人很早发现了这种问题，为便于交流指定了编码标准，于是有了： ASCII(American Standard Code for Information) ASCII码是7位编码，但由于计算机基
VueJs+React初学小结
github_39211471的博客
06-17 499
永远学习最新的资料。 想要印象深刻就看文档，快速入手就看视频。
Vue 动态路由（Vue动态路由入门，图文详解）
天道酬勤
07-08 8583
该文章的项目是我的上篇文章的项目，上篇博客地址：上篇博文 1 什么的动态路由 根据路径不同，显示内容不同。就像图片路径:image/1 ,其中变化的就是这个“1”，根据这个数字的变化会展示不同的图片。 2 页面编写 在src/components路径下创建item.vue，其中内容为（当然你也可以不使用id，使用别的你想要的名字） <template> <div >...
如何开发rest接口服务_如何简化网络请求接口开发
weixin_39948309的博客
11-30 292
日常开发中，需要大量和后端对接接口，很容易写出大量的模板代码，比如把对接口的请求放到组件内，或者虽然有数据访问层，但是有大量 get，post 方法的调用，传参的字符串拼接，异常处理等等，有些逻辑是可以通过请求拦截来处理的，有些可以通过配置得到简化，本文是对这个过程的一个实践和总结。面对的问题首先，明确下我们要解决什么问题，因为说到网络请求调用，使用 axios 库就可以了，上手简单，提供请求拦截...
网络爬虫之网页数据解析（正则re）
qq_42546127的博客
05-27 6266
文章目录小实例正则匹配规则match方法：从起始位置开始查找，一次匹配search方法：从任何位置开始查找，一次匹配findall方法：全部匹配，返回列表finditer方法：全部匹配，返回迭代器split方法：分割字符串，返回列表sub方法：替换匹配中文：re.compile(u'[\u4e00-\u9fa5]+')贪婪模式与非贪婪模式正则案例批量爬取图片多线程爬取图片西刺代理正则表达式测试网站 小实例 s = 'hello world python high salary 123 456 Hello
springBoot集成vue-admin-template实现动态路由使用sql
07-18
springBoot集成vue-admin-template实现动态路由所使用的数据库数据sql
Vue学习之旅Part16：Vue结合webpack使用vue-router实现路由和子路由
01-20
在Vue学习之旅的第16部分，我们将探讨如何结合Webpack来使用vue-router，实现应用中的路由和子路由功能。 首先，为了使用vue-router，你需要通过命令行工具安装这个库。在项目目录下，运行`cnpm i vue-router -S`，...
Vue 动态设置路由参数的案例分析
01-21
在vue中 可以动态设置路由参数： 1.使用this.$router.go()，与js histroy.go() 用法一直,前进1，后退-1，当前页面:0 注意 使用go时 必须是已经有访问历史记录了 案例： <button @click=goht>后退<...
vue vuex vue-rouert后台项目——权限路由（适合初学）
08-28
vue vuex vue-router 后台项目——权限路由详解 本文将详细介绍 vue vuex vue-router 后台项目中的权限路由机制，旨在帮助初学者快速了解 vue+vuex+vue-router 的关系。 项目概述 本项目是一个简单的后台项目，...
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
11-26
在构建后台管理系统时，动态加载路由和菜单权限是常见的需求，尤其在权限管理精细到菜单级别时。Vue.js 框架提供了 Vue Router 和 Vuex 这样的工具来帮助我们实现这一功能。Vue Router 是 Vue.js 的官方路由库，用于...
小白的vue学习之路
weixin_37770640的博客
06-12 1439
指令v-textv-htmlv-showv-ifv-elsev-else-ifv-forv-onv-bindv-modelv-prev-cloakv-once#### vue介绍* 2014年诞生,2013年react,09年angularjs* 作者 尤雨溪* 核心概念:     组件化  双向数据流 (基于ES5中的defineProperty来实现的),IE9才支持* angular核心： ...
vue-router动态路由详解
热门推荐
木雷双雄7
10-20 1万+
平时做项目时遇到的点击列表页，显示详情页面，此时就需要我们传递列表唯一的标识，然后显示对应的内容。 通常做法是以“参数=值”的形式传递参数，而动态路由将参数融入到路由的路径定义之内成为路径的一部分。 在参数名称之前加“：”，然后将参数写在路由的path内。 下面是给详情页detail传递唯一标识id，从而调取详细的内容。 routes: [ { path: '/',
动态路由（四）OSPF高级配置 重分发 虚链路 理论
Gengchenchen的博客
11-06 461
OSPF高级配置 重分发 虚链路 理论一、路由重分发（一）、理解路由重分发（二）、路由重分发的考虑二、OSPF重分发路由（一）、重分发到OSPF域中路由的路径类型（二）、路由器有两条到达外部目的网络的路径E1、E2三、NSSA区域（一）、NSSA区域是OSPF RFC的补遗（二）、OSPF链路状态通告四、高级配置命令OSPE路由重分发配置命令非纯末梢区域配置命令五、OSPF小结（一）、常见的6种LSA（二）、每一种区域中允许泛洪的LSA（三）、OSPF的路径类型（四）、OSPF的路径类型的优先级六、OSP
vue2.0-路由嵌套、动态路由跳转
weixin_33755557的博客
02-21 1339
vue2.0-路由嵌套、动态路由跳转 1、创建项目 $ vue init webpack vuerouter2(忽略所有其他语法) $ cd vuerouter2/ $ npm run dev 正常启动，访问http://localhost:8080，链接即可。 2、基础配置 创建样式文件，src/assets/css/basic.scss 引入静态样式文件，在m...
初尝async/await
KLbluegreen的博客
03-20 168
1、优点： 方便级联调用；使用类似于同步代码的编写方式；可以一次传递多个参数；同步代码和异步代码可以一起编写；基于协程；是对Promise的优化。 2、级联调用、同步代码方式、传递参数 /** * @description 返回花费的时间 * @params n，表示这个函数执行的时间（毫秒） * 返回的值会在async/await调用时让前一个方法的结果作为后一个的参数 * n + 10...
async await特点及使用
龚珂心的博客
09-06 334
Async+Await相较于promise代码，优雅简洁了很多，避免了.then嵌套回掉… Async关键字 async function fun1(){ return "hello world"}function fun2() { console.log("我是后面的程序")}fun1().then(value=>{ console.log(value)})fun2(); //我是后面的程序 //hello world复制代码 console.log(fun1())复制代码
react 动态修改路由_react动态路由以及获取动态路由
weixin_39811036的博客
12-19 612
业务中会遇到点击列表跳转到详情页，1.在index.js修改我们的跟组件新建router2的文件import React from 'react'import {HashRouter as Router,Route,// Link,Switch} from 'react-router-dom'import Main from './main'import Info from './info'imp...
视频教程-新React+VUE前端教程入门到精通-Vue
weixin_34186758的博客
05-28 729
新React+VUE前端教程入门到精通 10年以上开发经验，曾经是八维教育实...
vue-router深度解析：构建6个示例带你掌握路由切换
"本文将深入探讨vue-router的使用，通过6个示例，包括乞丐版和皇帝版，讲解如何构建基于Vue.js的单页面应用。我们将了解路由在单页面应用中的作用，即定义访问路径并关联组件，以及如何通过vue-router实现组件间的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值