首页 > 其他分享 >Nuxt2 实现动态路由参数用“/”分割

Nuxt2 实现动态路由参数用“/”分割

时间:2024-01-26 09:24:05浏览次数:23  
标签:分割 detaile Nuxt2 参数 HyZDetaile news id 路由

前提条件: 1. 必须是固定的参数传递,比如传递参数为固定的 2 个 3 个   =>  http://xxxxxxx/参数1/参数2

                2.  通过创建(动态参数)的文件夹目录自己匹配生成路由

传递参数:

1 <nuxt-link
2       to="'/news/HyZDetaile/' + titleEn + '/' + id"
3       target="_parent"
4       class="word"
5 >
6     跳转
7 </nuxt-link>
8 
9 #titleEn. 参数1   id参数 2

动态文件目录创建:

#_detaile文件夹 对应参数  titleEn 参数 1

#_id 文件 对应参数 id 参数 2

打印 console.log(this.$route.params):

.nuxt 对应生成的router 路由为:

1   {
2     "name": "news-HyZDetaile-detaile-id",
3     "path": "/news/HyZDetaile/:detaile?/:id?",
4     "component": "/Users/mrzhao/Desktop/pc_now/pc_m/pages/news/HyZDetaile/_detaile/_id.vue",
5     "chunkName": "pages/news/HyZDetaile/_detaile/_id"
6   }

 

标签:分割,detaile,Nuxt2,参数,HyZDetaile,news,id,路由
From: https://www.cnblogs.com/PengZhao-Mr/p/17988578

相关文章

  • django路由分发1中RegexURLResolver, RegexURLPattern和2中URLResolver, URLPattern
    django路由分发1中RegexURLResolver,RegexURLPattern和2中URLResolver,URLPatternfromdjango.confimportsettingsfromdjango.utils.module_loadingimportimport_stringfromdjango.urlsimportRegexURLResolver,RegexURLPatternfromcollectionsimportOrderedDict......
  • 浮动路由及负载均衡
    拓扑:配置:查看代码[R1]discurrent-configuration[V200R003C00]#sysnameR1#boardadd0/12SA#snmp-agentlocal-engineid800007DB03000000000000snmp-agent#clocktimezoneChina-Standard-Timeminus08:00:00#portallocal-serverloadportalpage.......
  • svelte路由01
    1、about.svelte页面a、使用 use:link 方式<script>import{link}from'svelte-spa-router';</script><div>这里是about关于我们</div><div><ahref="/home"use:link>进入首页</a></div>......
  • Uni-app页面路由的五种写法
    uni.navigateTo(OBJECT)uni.redirectTo(OBJECT)uni.reLaunch(OBJECT)uni.switchTab(OBJECT)uni.navigateBack(OBJECT) 概要代码展示在最后,可以在应用中感受这几种不同方法的不同页面路由的方式有很多,在项目中遇到不同的跳转需求,就需要使用不同的跳转方法,下面介绍一下不......
  • nginx 配置文件(路由转发)
    #usernobody;worker_processes1;#error_loglogs/error.log;#error_loglogs/error.lognotice;#error_loglogs/error.loginfo;#pidlogs/nginx.pid;events{worker_connections1024;}http{includemime.types;defau......
  • 路由
    路由api.router.pas///<author>2024-1-25</author>unitapi.router;interfaceusesglobal,net.CrossHttpServer,yn.log,Classes,StrUtils,SysUtils;typeTMyProc=procedure(req:TRequest;res:TResponse)ofobject;procedurerouter(con......
  • 静态路由基本配置
    拓扑:配置:查看代码[R1]discurrent-configuration[V200R003C00]#sysnameR1#boardadd0/12SA#snmp-agentlocal-engineid800007DB03000000000000snmp-agent#clocktimezoneChina-Standard-Timeminus08:00:00#portallocal-serverloadportalpage.......
  • gin框架路由讲解
     点击关注......
  • angular 16 路由守卫更新
    在angular16中守卫使用方式进行了更新,route守卫被弃用(取消了CanActivate的使用),新增了功能性守卫(CanActivateFn),支持inject注入,官网提供了一个新的类型exportdeclaretypeCanDeactivateFn<T>=(component:T,currentRoute:ActivatedRouteSnapshot,currentState:Route......
  • thinkphp 资源路由
    资源路由usethink\facade\Route;//资源路由thinkphp提供了一个命令方便开发者快速生成一个资源控制器//执行phpthinkmake:controllerBlogBlog是控制器类文件名字//标识index类型get路由blog//标识create类型get路由blog/create//标识save类型......