nuxt.js 路由和路由参数

系统管理员 2022-10-04 14:57 184阅读 0赞

**nuxt.js 的路由会直接在pages中新建文件夹或文件后自动生成。**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center]  
**在pages 下新建 news 文件夹 和 fishing文件夹，在.nuxt文件夹下router.js文件中自动生成：**

routes: [{ 
        path: "/fishing",
        component: _b13fdc34,
        name: "fishing"
      }, { 
        path: "/news",
        component: _6b1a0831,
        name: "news"
      }, { 
        path: "/",
        component: _1157b838,
        name: "index"
      }],

**路由的跳转：**  
通过 a标签或者 nuxt-link的方式跳转

<ul>
          <li><nuxt-link :to="{name:'news', params:{newsId:2001}}">news</nuxt-link></li>
          <li><nuxt-link :to="{name:'fishing'}">fishing</nuxt-link></li>
        </ul>

其中，参数是通过params来传递，相应的组件通过params来进行接受：

<h2>newsId:{ {  $route.params.newsId }}</h2>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221004/e94cf94e91ca4eee9eb101e7f8101fe6.png

发表评论取消回复

表情：

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

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

相关阅读

相关全局路由守卫和路由

import { createRouter, createWebHistory, RouteRecordRaw, cr

逃离我推掉我的手/ 2022年12月09日 11:52/ 0 赞/ 236 阅读

相关路由 vue-router 路由守卫路由重定向路由嵌套路由守卫路由命名路由懒加载

Vue Router 是 [Vue.js][] 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表

傷城~/ 2022年12月02日 01:04/ 0 赞/ 299 阅读

相关静态路由和动态路由

现实生活中的路由表就是路牌，让你能够到达目的地。而计算机设备的数据要到达目标也需要有"路牌"，在网络中这叫路由。把数据从源设备发送到下一台设备。路由就是“找路”，是IP包转发路

r囧r小猫/ 2022年11月17日 10:20/ 0 赞/ 342 阅读

相关 vue 路由、嵌套路由、动态路由

简介路由就是一套映射规则，当url中的哈希值（\hash）改变时，路由会根据制定好的规则，展示对应的视图组件。 vue中的路由路径分为：相对路径（不带 ‘/’，会拼接

朴灿烈づ我的快乐病毒、/ 2022年10月29日 13:28/ 0 赞/ 353 阅读

相关 nuxt.js 路由和路由参数

nuxt.js 的路由会直接在pages中新建文件夹或文件后自动生成。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sha

系统管理员/ 2022年10月04日 14:57/ 0 赞/ 185 阅读

相关 Nuxt.js学习(三)---Nuxt的动态路由、路由参数、路由嵌套

1、Nuxt的动态路由在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件或目录。 1.1、官方文档：以下目录结构

蔚落/ 2022年08月29日 10:28/ 0 赞/ 1401 阅读

相关 AngularJS路由 $state服务、路由事件、获取路由参数

1 ui-sref、$state.go 的区别 ui-sref 一般使用在 …； <a ui-sref="message-list">消息中心</a> $st

àì夳堔傛蜴生んèń/ 2022年06月17日 04:43/ 0 赞/ 231 阅读

相关基本路由和静态路由配置

R1(config)\ erase startup-config .在特权模式下使用 erase startup-config命令清除配置 R1(con

怼烎@/ 2022年02月20日 02:47/ 0 赞/ 450 阅读

相关 AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式，获取路由参数，路由的Resolve...

本系列探寻AngularJS的路由机制，在WebStorm下开发。主要包括： ● 刷新路由 ● 查看当前路由以及所有路由 ● 路由触发事件 ● 获取路

男娘i/ 2021年11月02日 12:32/ 0 赞/ 345 阅读

相关路由传参和路由卫士

1.动态路由匹配动态路由也可以叫做路由传参。组件的显示内容经常会根据用户选择的内容不同来在同一个组件中渲染不同内容。那么在这个时候就需要动态路由。 1. 动态

古城微笑少年丶/ 2021年08月19日 15:06/ 0 赞/ 485 阅读