Nuxt 路由可以使用a标签进行链接跳转,例如我们创建了一个demo.vue的文件

<p>
<a href="/demo">跳转去Demo页面</a>
</p>

但是Nuxt中有专属的标签 nuxt-link, 因此上次可以改写为:

<p>
<nuxt-link :to="{name: 'demo'}">跳转去Demo页面</nuxt-link>
</p>

注: 在实际开发中,尽量使用标签进行跳转

Nuxt传参其实也是比较好理解的

例如我们现在新建一个commodity.vue文件,然后新建一个details文件夹,并新建一个index.vue , 要求是从commodity.vue 传递参数, 在index.vue 中接收

commodity.vue

<p>
<nuxt-link :to="{name: 'details', params: {id: 123}}">跳转去Demo页面</nuxt-link>
</p>

index.vue

<p>传递过来的参数:{{$route.params.id}}</p>

Nuxt的路由配置以及传参的更多相关文章

  1. vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同

    import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...

  2. Vue Router路由导航及传参方式

    路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...

  3. Angular:路由的配置、传参以及跳转

    ①路由的配置 1.首先用脚手架新建一个项目,在路由配置时选择yes 2.用ng g component创建组件 3.在src/app/app-routing.module.ts中配置路由 import ...

  4. Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参

    目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...

  5. Vue之路由跳转 传参 aixos 和cookie

    一.路由跳转 1.1 项目的初始化 vue create m-proj   >>>创建vue项目 精简vue项目的 views 视图   About(基本是删除的) Home.(可以 ...

  6. Tornado学习笔记(二) 路由/post/get传参

    本章我们学习 Tornado 的路由传参等问题 路由 路由的匹配 Tornado的路由匹配采用的是正则匹配 一般情况下不需要多复杂的正则,正则的基本规则如下(站长之家) 举个例子 (r'/sum/(\ ...

  7. ionic简单路由及页面传参

    1)页面跳转及传参方法 angular.module('app.routes', [])//routes路由模型 .config(function($stateProvider, $urlRouter ...

  8. vue2.0路由写法、传参和嵌套

    前置知识请戳这里 vue-routerCDN地址:https://unpkg.com/vue-router@3.0.1/dist/vue-router.js vue-router下载地址:https: ...

  9. vue-router路由如何实现传参

    tip: 用params传参,F5强制刷新参数会被清空,用query,由于参数适用路径传参的所以F5强制刷新也不会被清空.(传参强烈建议适用string) 也可以选用sessionstorage/lo ...

随机推荐

  1. 遇到的基础php函数、方法

    0x01 PHP file() 函数 file() 函数把整个文件读入一个数组中. 数组中的每个元素都是文件中相应的一行,包括换行符在内. 实例: <?php print_r(file(&quo ...

  2. 微信小程序中如何上传图片

    本篇文章给大家带来的内容是关于微信小程序中如何上传图片(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.wxml文件 <text>上传图片</text ...

  3. vue 截取字符串

    let str = 'abcdef'; str = str.slice();//返回整个字符串 abcdef str = str.substring();//返回整个字符串 abcdef str = ...

  4. Windows启动项更改

    笔者遇到的问题: 之前新装了Windows10系统,但没注意到的是竟然是deepin和Windows10双系统,一是用不到deepin系统,二是占用C盘空间太多,就重新装回了Windows7系统,但重 ...

  5. 题解【Vijos1159】岳麓山上打水

    题面 迭代加深搜索模板题. 注意开始时要先对桶的容量从小到大排序. 达到搜索层数时使用完全背包\(\text{check}\)即可. 具体实现参考代码. #include <bits/stdc+ ...

  6. Android 开发OOM解决方案

    OOM(Out Of Memory)在加载图片过多或者过大的情况下会发生OOM,可以查看APP最高可用内存: int maxMemory = (int) (Runtim.getRuntime().ma ...

  7. 剑指offer 面试题43. 1~n整数中1出现的次数

    leetcode上也见过一样的题,当时不会做 看了一下解法是纯数学解法就没看,结果剑指offer上也出现了这道题,那还是认真看下吧 对于数字abcde,如果第一位是1,比如12345,即计算f(123 ...

  8. MySQL起别名

    好处: 便于理解 连接查询的时候,如果要查询的字段有重名的情况,使用别名可以区分开来 注意: 如果别名中有特殊符号 # 空格 ... ,需要用 "双引号" 把别名引起来单引号也行, ...

  9. C++-POJ3321-Apple Tree[数据结构][树状数组]

    树上的单点修改+子树查询 用dfn[u]和num[u]可以把任意子树表示成一段连续区间,此时结合树状数组就好了 #include <set> #include <map> #i ...

  10. 磁盘分区(1):fdisk和parted

    一.Linux存储管理 关于Linux硬盘的识别: (1)如果是IDE设备,在计算机中将被识别为hd,第一个IDE设备会被识别为hda,第二个IDE设备会被识别为hdb,依此类推. (2)如果是SAT ...