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. Windows下MongoDB的配置及其远程连接

    基本操作MongoDB的基本安装https://blog.csdn.net/heshushun/article/details/77776706启动和配置MongoDB服务参考博客https://bl ...

  2. C++——指针4

    8.对象指针  声明: 类名 *对象指针名 Point A(5,10): Point *ptr; ptr=&A;//通过指针访问对象成员:对象指针名->成员名.ptr->getX( ...

  3. 浅谈radis

    1.概述 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API 从2010年3月15日起,Redis的开发工作由VM ...

  4. VTK坐标系统及视图分割

    计算机图像学里广泛应用的坐标系统有四种,分别是:模型坐标系统(model),世界坐标系统(world),视图坐标系统(view)和显示坐标系统(display). 模型坐标系统就是定义模型时所用的坐标 ...

  5. HTML连载63-a标签的伪类选择器

    一.a标签的伪类选择器 1.通过观察可以发现a标签存在一定状态 (1)默认状态,从未被访问过 (2)被访问过的状态 (3)鼠标长按的状态 (4)鼠标悬停在a标签上的演示 2.什么是a标签的伪类选择器? ...

  6. jQuery图片剪裁插件Cropper.js的使用

    插件下载地址及文档说明 1.引入必要的js和css核心文件 <link rel="stylesheet" href="../css/cropper.css" ...

  7. Druid连接技术

    1.导入jar包 druid-1.0.9.jar导入数据库驱动jar包 2.定义配置文件 properties形式 可以叫任意名称,可以放置在任意目录下.(意味着不能自动加载,需要手动导入)3.加载配 ...

  8. day22 用户添加相关命令 特殊权限为 防止root修改文件

    2) 用户相关的命令 useradd -u -g -G -M -s -c usermod -u -g -G -s -c userdel -r groupadd groupmod groupdel ch ...

  9. c#中的yield词法

    yield关键字的作用是将当前集合中的元素立即返回,实例: 通过断点可以看到,控制台每显示一个集合中的元素,都会到query方法中去取集合元素. 其实yield return是“语法糖”,其本质是生成 ...

  10. 《TCP/IP入门经典》摘录--Part 1

    TCP/IP基础知识 什么是TCP/IP Transmission Control Protocol/Internet Protocol的简写,中译名为传输控制协议/因特网互联协议,又名网络通讯协议, ...