首页 > 其他分享 >Nuxt2——路由

Nuxt2——路由

时间:2024-01-18 16:34:57浏览次数:31  
标签:index vue users Nuxt2 user pages 路由

Nuxt内置了路由模块,无需自行编写路由文件

Nuxt会根据pages/自行配置路由文件

基础路由

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

得到路由配置

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

嵌套路由

pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue

router: {
  routes: [
    {
      path: '/users',
      component: 'pages/users.vue',
      children: [
        {
          path: '',
          component: 'pages/users/index.vue',
          name: 'users'
        },
        {
          path: ':id',
          component: 'pages/users/_id.vue',
          name: 'users-id'
        }
      ]
    }
  ]
}

 

标签:index,vue,users,Nuxt2,user,pages,路由
From: https://www.cnblogs.com/karle/p/17972800

相关文章

  • Vue3.0 路由动画(页面跳转)
    前言vue3.0的页面组件之前切换的动画效果,在移动端H5页面,交互体验比较好,就是带Vue3的Transition组件 之前的写法是 Transition的组件要包在routerView外面,但是3.0的语法就是要在在里面了,不然会黄色警告<divclass="animation"><RouterViewv-slot="{Component,......
  • 路由--工作原理
    什么是<router-view>?<router-view>是VueRouter提供的一个特殊组件。它的作用是作为一个占位符,用于显示当前路由对应的组件。如何理解"路由出口"?把<router-view>想象成一个电影院的屏幕。你可以在这个屏幕上播放不同的电影(组件),而哪部电影正在播放则取决于电影院的播......
  • Nuxt2——构建文件
    nuxt2构建文件放在nuxt.config.js,使用cjs语法,暴露配置对象基本配置项mode 有spa和universal两种模式。spa没有使用到服务器渲染,但是使用路由。universal使用服务器渲染加客户端路由mode:'universal'head配置html的<head></head>内容head:{titleTemplate:'%s-Nuxt......
  • 记一个vue2中使用路由时,在同一个页面跳转,但是url参数不同,不会重新渲染页面的问题
    vue2中使用路由时,页面自己跳转自己,但是携带的参数不一样预期想要的结果是:感冒2会跟随着url的参数进行变化,但是并没用 解决方法: 在App.vue这个页面中的router-view添加  :key="$route.fullPath"结果在自己跳转自己之后会刷新页面 达成:参考:https://blog.csdn.ne......
  • vue-element-admin/litemall后端,超过两级嵌套路由无法缓存的问题
    本文主要针对的是litemall后端,vue-element-admin只需稍作修改应该也可以适用。路由扁平的思路主要来源于https://blog.csdn.net/weixin_40119256/article/details/111475571,另外解决面包屑显示问题,此文章作记录以供有需要的同行参考。keep-alive用于缓存不活跃的组件实例,避免重......
  • Windows 路由配置(有线通内网,Wi-Fi 通外网)
    Windows路由配置ROUTE命令ROUTE命令基本格式为ROUTE[-f][-p][-4|-6]command[destination][MASKnetmask][gateway][METRICmetric][IFinterface]参数含义:-f:清除路由-p:永久保存-4/-6:指定查看IPv4或IPv6的路由,默认查看全部command:自命令,包括:......
  • Gin路由分组
    Gin路由分组1假设我们需要开发的接口有这些packagemainimport( "net/http" "github.com/gin-gonic/gin")funcmain(){ r:=gin.Default() r.GET("/",func(c*gin.Context){ c.String(200,"首页") }) r.GET("/news",f......
  • Vue学习计划-Vue3--核心语法(六)路由
    1.路由【对路由的理解】【基本切换效果】Vue3中要使用vue-router的最新版本,目前是4版本路由配置文件代码如下://创建一个路由器,并暴露出去//第一步:引入createRouterimport{createRouter,createWebHistory}from'vue-router'//引入一个一个可能要呈现组件......
  • 电脑连接家里路由器,ipv6不是公网ip
    1.我用手机流量当热点,笔记本电脑连接手机热点,此时电脑ip是公网ip电脑网络属性如下我用另外一台连接家里路由器的mini主机ping这个ip,是能ping通的此时手机和笔记本是一个网络,路由器和mini主机是一个网络mini主机的cmd命令如下说明笔记本电脑的ipv6是公网ip2.我用笔记本......
  • 软件测试|探索Flask接口路由技术:构建灵活可拓展的Python应用
    什么是路由路由是将URL地址与应用程序中的函数相映射的过程。当用户在浏览器中输入特定的URL地址时,Flask会调用与该地址相匹配的函数并返回相应的结果。路由的应用场景在Web应用程序都通过路由技术使用URL链接来控制网页显示的内容,只要知道URL链接,即使没有主页导航也可......