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. Namespace declaration statement has to be the very first statement or after

    解决办法:将页面文件转为utp-8无dom格式就OK了.以notepad++为例:

  2. TD - SimpleTextarea

    html模板 <input dojoType="bootstrap.form.SimpleTextarea" dojoAttachPoint="assetDescr ...

  3. java 学习(day1)

    之前学java没好好听课,会一点又不熟练,于是准备重新开始学一些细节,记录每日所学新知识. a+b java的a+b很有意思,当你输出的是" "+a+b,先假设a=2,b=3.然后 ...

  4. 自定义Nginx返回页面

    1.403返回页面 #user nobody; worker_processes ; #error_log logs/error.log; #error_log logs/error.log noti ...

  5. Java学习笔记(十二)面向对象---内部类

    内部类的访问规则 内部类可以直接访问外部类中的成员,包括私有成员. 因为内部类中持有了一个外部类的引用,格式为:外部类名.this 外部类要访问内部类,必须要建立内部对象. class Outer { ...

  6. centos添加用户并赋予 root管理员权限

     centos添加用户并赋予 root管理员权限 用centos时,root用户一般都是超级管理员使用的,一般不轻易给别人,但是有时候同事安装软件时需要root账号,又不得不给,只能重新建一个用户,并 ...

  7. Windows下编译Google.Protobuf在Qt(C++)中使用与Unity3d(C#)交互

    1.首先从Github-Protobuf下载代码,本文下载的版本号是3.1.0. 2.仔细查看各个README,有相关的资源下载和编译说明. 3.在一个方便的地方创建一个Install类型的文件夹,放 ...

  8. OpenCV离散傅里叶变换

    离散傅里叶变换 作用:得到图像中几何结构信息 结论:傅里叶变换后的白色部分(即幅度较大的低频部分),表示的是图像中慢变化的特性,或者说是灰度变化缓慢的特性(低频部分). 傅里叶变换后的黑色部分(即幅度 ...

  9. Virtual Judge POJ 3278 Catch That Cow

    #include<iostream> #include<cstdio> #include<cstring> #include<cmath> #inclu ...

  10. ajax post

    前端 $.post("url",JSON.stringify({ a:a, ... }), function(data){ }, 'json'); 后端 @PostMapping( ...