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. [Python]爬取CSDN论坛 标题 2020.2.8

    首先新建一个Lei.txt 内容为: CloudComputingParentBlockchainTechnologyEnterpriseDotNETJavaWebDevelopVCVBDelphiB ...

  2. 洛谷P5534 【XR-3】等差数列 耻辱!!!

    题目描述 小 X 给了你一个等差数列的前两项以及项数,请你求出这个等差数列各项之和. 等差数列:对于一个 nnn 项数列 aaa,如果满足对于任意 i∈[1,n)i \in [1,n)i∈[1,n), ...

  3. Python中numpy模块的简单使用

    # encoding:utf-8 import numpy as np data1 = np.array([1, 2, 3, 4, 5]) print(data1) data2 = np.array( ...

  4. 《NVM-Express-1_4-2019.06.10-Ratified》学习笔记(4.12-加-6.2-加-7.2.5.2)Fused_Operations

    4.12 Fused Operations 融合操作 融合操作通过“fusing”把两个简单的命令融合一起来支持一个更复杂的命令.协议规定这个特性是可选的:如果支持此特性,需要在Figure 247 ...

  5. springBoot 2.1.5 pom 文件 unknown 错误

    插件不兼容 pom文件添加 <properties>    <maven-jar-plugin.version>2.6</maven-jar-plugin.version ...

  6. vue源码的入口(四)

    我们之前提到过 Vue.js 构建过程,在 web 应用下,我们来分析 Runtime + Compiler 构建出来的 Vue.js,它的入口是 src/platforms/web/entry-ru ...

  7. leetcode腾讯精选练习之相交链表(六)

    相交链表 题目: 编写一个程序,找到两个单链表相交的起始节点. 如下面的两个链表: 在节点 c1 开始相交. 示例 1: 输入:intersectVal = 8, listA = [4,1,8,4,5 ...

  8. 全排列(dfs-有重复数字)

    给出一个字符串S(可能有重复的字符),按照字典序从小到大,输出S包括的字符组成的所有排列.例如:S = "1312", 输出为:   1123 1132 1213 1231 131 ...

  9. 0002 增加APP配置

    创建好工程后的第一步就是配置APP,目前有两个APP,配置APP的步骤如下: 01 APP目录配置 01.1 在APP目录下创建Templates目录,用于存储模板文件 01.2 在APP目录下创建v ...

  10. Learning to See in the Dark论文阅读笔记

    这是一篇图像增强的论文,作者创建了一个数据集合,和以往的问题不同,作者的创建的see in the dark(SID)数据集合是在极其暗的光照下拍摄的,这个点可以作为一个很大的contribution ...