nuxt引入js_nuxt.js基本路由配置
发布日期:2021-06-24 13:16:20 浏览次数:2 分类:技术文章

本文共 782 字,大约阅读时间需要 2 分钟。

项目的搭建请参考网上文档

1、先说一下路由配置,结合官方API进行参考

如图所示,nuxt.js的静态页面都是存放在pages目录下的,我们只需要创建自己需要的文件夹和文件就行了,它会根据文件所在的路径自动生成路由,

如图1所示为嵌套路由,嵌套路由的话首先我们需要创建一个文件夹(information(文件夹名字可以随便起)),在该文件夹下创建一个index.vue的文件(index.vue文件相当于首页,主容器,里面主要配置导航等样式,最后别忘了在里面需要的地方写标签(用来展示子文件的内容))。接下来需要创建存放子文件的文件夹(注意:是在information文件夹下创建。该文件夹名字必须是和刚刚创建的index文件名一样的),如图1所示 index文件夹就是用来存放子文件的地方,里面的子文件名字可以随便起。

图2所示为动态路由配置,index.vue为主页面相当于列表页,当点击列表某一项的时候我们就需要传参进入详情页,那_id.vue文件就是我们需要展示的详情页,(_id.vue文件名字不可以更改)我们需要在这个页面接受index.vue传递过来的id参数,进行接口请求获取数据展示

需要注意的是nuxt.js的动态路由传参方式,如图:(注意是$route)

路由跳转:this.$router.push(' / '), 跳转外部链接使用(window.location.href = " e ")

2、说一下echarts等插件的依赖安装和使用

1.先安装依赖  npm install echarts --save

2.找到plugins文件夹,在里面新建一个echarts.js文件,然后写入代码如图所示:

3.找到nuxt.config.js配置文件,在里面引入我们刚刚创建的echarts.js,如图:

nuxt基本上和vue都是一样的!

转载地址:https://blog.csdn.net/weixin_33073525/article/details/112938177 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:esrgan_关于ESRGAN复现的问题
下一篇:c语言怎么把数字倒过来_c语言编程:实现数字的翻转

发表评论

最新留言

网站不错 人气很旺了 加油
[***.192.178.218]2024年04月25日 19时53分13秒