vue项目笔记（23）-动态路由传值及iconfont更新使用

旧城等待， 2021-09-16 03:26 241阅读 0赞

# 动态路由与路由传值 #

## router-link相关知识 ##

vue中可以使用<router-link></router-link>实现路由跳转，vue中<router-link></router-link>将来会被渲染成a标签，且有默认样式。

<router-link></router-link>带有tag属性，可以设置将来渲染成的标签类型，比如li标签。

绑定动态路由，实现到不同页面路由的切换，在router/index.js中配置路由。

home/components/Recommend.vue

<template>
      <div class="recommend">
        <div class="recommend-title">热销推荐</div>
        <ul>
          <router-link tag="li" class="item border-bottom" v-for="item of list" :key="item.id" :to="'/detail/' + item.id"  >
            <img class="item-img"
                 :src="item.imgUrl">
            <div class="item-info">
              <p class="item-title">{
       {item.title}}</p>
              <p class="item-desc">{
       {item.desc}}</p>
              <button class="item-button">查看详情</button>
            </div>
          </router-link>
        </ul>
      </div>
    </template>

{
        path: '/detail/:id',
        name: 'Detail',
        component: Detail
      }

新建pages/detail/Detail.vue组件即可。

## iconfont更新使用 ##

在项目中，我们已经使用了部分的图标，新的组件中需要新的图标，我们可以在iconfont官网查找，并添加到购物车中，然后“下载到本地”使用即可。在新生成的文件中，我们将字体文件替换。需要注意的是，我们必须修改iconfont.css中的部分代码（用新生成的iconfont.css中对应位置的代码代替即可）

iconfont.css

url('data:application/x-font-woff;charset=utf-8;base64,...

发表评论取消回复

表情：

评论列表（有 0 条评论，241人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js框架--动态路由Get传值（十七）

主要操作技能：官网 https://router.vuejs.org/ 中文网 https://router.vuejs.org/zh/guide/ 一、不同路

绝地灬酷狼/ 2024年02月18日 23:44/ 0 赞/ 43 阅读

相关 vue路由传值与路由跳转

一、用name传递参数两步完成用name传值并显示在模板里： 1. 在路由文件src/router/index.js里配置name属性。

迷南。/ 2022年05月28日 12:57/ 0 赞/ 300 阅读

相关 Vue路由传值的两种方法：动态路由与get传值

1.动态路由传值在我这个项目里要实现的是从 News.vue 跳转到Content.vue News.vue <template> <!-- 所有

迈不过友情╰/ 2022年03月17日 11:48/ 0 赞/ 387 阅读

相关 Vue教程(路由Router-传值)

本文我们来介绍下在`Vue`中路由的传参问题 Vue路由传参首先我们来准备一个基本路由的页面，如下: <!DOCTYPE html> <ht

你的名字/ 2021年11月11日 12:00/ 0 赞/ 379 阅读

相关 vue路由传值

1）通过动态路由方式 //路由配置文件中配置动态路由 { path: '/detail/:id',

╰半橙微兮°/ 2021年10月19日 11:52/ 0 赞/ 335 阅读

相关 vue路由传值与路由跳转

一、用name传递参数两步完成用name传值并显示在模板里： 1. 在路由文件src/router/index.js里配置name属性。

忘是亡心i/ 2021年09月16日 13:04/ 0 赞/ 578 阅读

相关 vue项目笔记（23）-动态路由传值及iconfont更新使用

动态路由与路由传值 router-link相关知识 vue中可以使用<router-link></router-link>实现路由跳转，vue中<route

旧城等待，/ 2021年09月16日 03:26/ 0 赞/ 242 阅读

相关 vue项目笔记（7）-使用iconfont

vue中iconfont的使用步骤 1、进入iconfont官网（[http://www.iconfont.cn][http_www.iconfont.cn]），进入“官

￡神魔★判官ぃ/ 2021年09月16日 02:04/ 0 赞/ 642 阅读

相关 uniapp - 路由跳转及路由传值

uniapp 中路由跳转一. 使用 navigator 组件跳转（无参数）二. 调用 API 编程式跳转跳转（无参数） 1. uni.navi

灰太狼/ 2021年07月25日 12:29/ 0 赞/ 1502 阅读

相关 vue 路由动态路径传参、路由嵌套

1、路由动态路径传参 (1)使用 1、在路由路径中 routes: [ { path: '/user/:id'

﹏ヽ暗。殇╰゛Y/ 2021年07月24日 20:42/ 0 赞/ 962 阅读