zoukankan      html  css  js  c++  java
  • 01-nuxt使用一

    1.全局安装:

     初始化项目

     然后根据提示一步步走,cd 到创建的项目文件夹中


    2.文件目录介绍


     3.路由规则:

    index对应的是 localhost:3000, pages对应的就是一个 "/"

     写入文件夹: 如果想写成:localhost:3000/student,要把student文件夹中的student.vue 改成index.vue

     


     4.路由跳转:

    nuxt-link 等同于 router-link,也可以用编程式导航

     注意:


     5.动态路由

     详情页取到动态ID,$route.params.id 这个id对应加了下划线的文件夹名字(_id)

     记住:一个文件目录对应着一个path,也就是文件夹名字就是path,文件夹中放index.vue


     6.动态路由参数校验

     

    我们其实想要id作为动态路由参数,也去显示这是xx号学生的详细信息,所以我们要对路由参数做校验:

    Nuxt.js 可以让你在动态路由对应的页面组件中配置一个`validate`方法用于校验动态路由参数的有效性。该函数有一个布尔类型的返回值,如果返回true则表示校验通过,如果返回false则表示校验未通过。

     

     

    我们打印的console.log(obj)不是在浏览器的控制台看的,而是在node服务(nuxt服务)中打印出来的(Vscode中)


     7.嵌套路由

     怎么做呢?具体步骤:

    第一步:新建一个teacher.vue文件

    第二步:新建一个teacher的文件夹(文件夹名字必须与组件名字一致)

    第三步:在teacher文件夹中新建_id的文件夹

    第四步:在_id文件夹中的index.vue中(详情页,动态路由对应的)编写我们的内容

    第五步:在teacher.vue(父路由)中增加一个显示子路由的显示容器

     效果:


     

  • 相关阅读:
    Kubernetes 查看node
    Zookeeper ZAB 协议分析[转]
    zookeeper 快速入门
    Kubernetes-dns 域名解析问题
    Kubernetes-dns 服务搭建
    Kubernetes dashboard 配置
    kubernetes 入门学习
    使用jenkins SonarQube gitlab 构建自动化发布系统
    VMware Harbor 学习
    docker快速入门
  • 原文地址:https://www.cnblogs.com/haoqiyouyu/p/14753858.html
Copyright © 2011-2022 走看看