Nuxt的路由配置和参数传递方式


Posted in Javascript onNovember 06, 2020

学习前端框架都要学习路由机制,因为路由可以体现我们的业务逻辑,把模块串联起来,让程序换发光彩。

那简单的说路由就是我们的跳转机制,也可以简单理解成链接跳转。

Nuxt.js的路由并不复杂,它给我们进行了封装,让我们节省了很多配置环节。

简单路由Demo

我们现在在根目录的pages文件下新建两个文件夹,about和news(模仿关于我们和新闻的功能模块)

在about文件夹下新建index.vue文件,代码如下:

<template>
 <div>
  <h2>About Index page</h2>
  <ul>
   <li><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
  </ul>
 </div>
</template>

在news文件夹下新建index.vue文件,代码如下:

<template>
 <div>
  <h2>News Index page</h2>
  <ul>
   <li><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
  </ul>
 </div>
</template>

修改原来的pages文件夹下的index.vue,删除没用的代码,写入下面链接代码:

<template>
 <div>
 <ul>
  <li><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >HOME</a></li>
  <li><a href="/about" rel="external nofollow" >ABOUT</a></li>
  <li><a href="/news" rel="external nofollow" >NEWS</a></li>
 </ul>
 </div>
</template>

<script>
export default {
 comments:{}
}
</script>

<style lang="less" scoped>

</style>

结果如下:

Nuxt的路由配置和参数传递方式

<nuxt-link>标签

虽然上面的例子跳转已经成功,但是Nuxt.js并不推荐这个中<a>标签的作法,它为我们准备了<nuxt-link>标签(vue中叫组件)。我们<a>标签替换成<nuxt-link>

about文件夹下新建index.vue

<template>
 <div>
  <h2>About Index page</h2>
  <ul>
   <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
  </ul>
 </div>
</template>

news文件夹下新建index.vue

<template>
 <div>
  <h2>News Index page</h2>
  <ul>
   <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
  </ul>
 </div>
</template>

pages文件夹下的index.vue

<template>
 <div>
 <ul>
  <li><nuxt-link :to="{name:'index'}">HOME</nuxt-link></li>
  <li><nuxt-link :to="{name:'about'}">ABOUT</nuxt-link></li>
  <li><nuxt-link :to="{name:'news'}">NEWS</nuxt-link></li>
 </ul>
 </div>
</template>

<script>
export default {
}
</script>

<style>

</style>

params传递参数

路由经常需要传递参数,我们可以简单的使用params来进行传递参数,我们现在向新闻页面(news)传递个参数,然后在新闻页面进行简单的接收。

我们先修改pages下的Index.vue文件,给新闻的跳转加上params参数,传递3306ID。

<template>
 <div>
 <ul>
  <li><nuxt-link :to="{name:'index'}">HOME</nuxt-link></li>
  <li><nuxt-link :to="{name:'about'}">ABOUT</nuxt-link></li>
  <li><nuxt-link :to="{name:'news',params:{newsId:3306}}">NEWS</nuxt-link></li>
 </ul>
 </div>
</template>
<script>
export default {
 components: {
 }
}
</script>
<style>
</style>

在news文件夹下的index.vue里用$route.params.newsId进行接收,代码如下。

<template>
 <div>
  <h2>News Index page</h2>
  <p>NewsID:{{$route.params.newsId}}</p>
  <ul>
  <li><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
  </ul>
 </div>
</template>

Nuxt的路由配置和参数传递方式

补充知识:nuxt路由中的params和query

定义路由

路由表,配置的整个项目中可以访问的所有的路由信息

建议每一个路由都加一个name属性,在页面跳转的时候使用

建议name不能重复

const router=new VueRouter({
 routes:[
  {
   path: '/detail', // 表示路径,表示url地址栏中输入的内容
   component: Home, // 表示访问这个地址的时候显示哪一个组件
   name: 'H', // 名字
  } 
 ]
 
})

路由跳转

1.router-link to属性设置跳转信息

to可以直接设置一个字符串,表示跳转的url地址

to可跟一个对象,建议使用此方法,跳转的时候使用name

2.编程式跳转

$router.push

路由传参

1.query 表示参数在url后面进行传递,参数直接拼在url地址栏的后面,用?分割一下,多个参数用&分割

获取使用 $route.query

2.params 表示在routes定义的时候可以使用 “:参数名”的形式进行占位处理

可以传递多个参数 如果要保证页面刷新之后参数还可以使用,需要在routes中做配置

获取使用 $route.params

(细节重点)如果想要在页面刷新或者执行其它操作之后还保留传递的参数,需要在路由表(routes)中作配置,使用 “:参数名”的形式进行占位处理

补充

当使用了vue-router组件之后

项目中会自动生成两个变量 $route $router

$route 表示当前页的路由信息 获取获取 地址 query params等参数
$router 表示路由对象 可以在上面访问路由的跳转方法
$route.params 获取params传的参数
$route.query 获取query传的参数
// vue-router学习笔记 记录开发中的点点滴滴

跳转路由的几种方式:

1、声明式:

1) 根据路由路径(/home/sort/detail)跳转 <router-link :to="{path: '/home/sort/detail', query:{id: 'abc'}}">点击查看子页面</router-link>

2) 根据路由名称(detail)跳转 <router-link :to="{name: 'detail', params:{id: 'abc'}}">点击查看子页面</router-link> :to="" 可以实现绑定动态的 路由 和 参数

2、编程式:

1) this.$router.push({path: '/home/sort/detail',query:{id: 'abc'}})

2) this.$router.push({name: 'detail',params:{id: 'abc'}})

备注: params 和 query 传参的区别:

1、params传参时 参数不会出现在url的路径上面, 但是刷新页面时param里面的数据会消失

2、query传参时 参数出现在url的路径上面, 刷新页面时query里面的数据不变

以上这篇Nuxt的路由配置和参数传递方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
jquery 新手学习常见问题解决方法
Apr 18 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 Javascript
js实现产品缩略图效果
Mar 10 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
详解JSON.stringify()的5个秘密特性
May 26 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 #Javascript
Jquery Fade用法详解
Nov 06 #jQuery
nuxt静态部署打包相对路径操作
Nov 06 #Javascript
全网小程序接口请求封装实例代码
Nov 06 #Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 #Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 #Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 #Javascript
You might like
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
php post换行的方法
2020/02/03 PHP
javascript折半查找详解
2015/01/26 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
JS实现随机点名器
2020/04/12 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
python如何使用unittest测试接口
2018/04/04 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
校园歌手大赛策划书
2014/01/17 职场文书
五年级科学教学反思
2014/02/05 职场文书
《威尼斯的小艇》教学反思
2014/02/17 职场文书
主持人开幕词
2015/01/29 职场文书
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers