Nuxt.js路由介绍

责编:menVScode 2018-09-25 17:09 阅读(277)

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。


1、基础路由

假设 pages 的目录结构如下:

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

vue组件部分代码

<div class="links">
    <router-link to="/user" target="_blank">用户</router-link>
    <router-link to="/user/one" target="_blank">one</router-link>
</div>

注:某文件中有index.vue,默认就是改文件的首页,再写路由直接写“/user”,如果写成“/user/index”,就会打不开页面。

那么,Nuxt.js 自动生成的路由配置如下:

export function createRouter () {
  return new Router({
    mode: 'history',
    base: '/',
    linkActiveClass: 'nuxt-link-active',
    linkExactActiveClass: 'nuxt-link-exact-active',
    scrollBehavior,
    routes: [
        {
            path: "/user",
            component: _4550a834,
            name: "user"
        },
        {
            path: "/user/one",
            component: _f6e5a370,
            name: "user-one"
        },
        {
            path: "/",
            component: _64ad481f,
            name: "index"
        }
    ],
    
    fallback: false
  })
}


2、动态路由

在 Nuxt.js 里面定义带参数的动态路由,需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。

以下目录结构:

pages
--| _slug
-----| comments.vue
-----| index.vue
--| users
-----| _id.vue
--| index.vue

Nuxt.js 生成对应的路由配置表为:

routes: [
    {
      path: "/user/:id?",
      component: _2d93279c,
      name: "user-id"
    },
    {
      path: "/",
      component: _64ad481f,
      name: "index"
    },
    {
      path: "/:slug",
      component: _805cc46a,
      name: "slug"
    },
    {
      path: "/:slug/comments",
      component: _49f8338b,
      name: "slug-comments"
    }
]

你会发现名称为 users-id 的路由路径带有 :id? 参数,表示该路由是可选的。如果你想将它设置为必选的路由,需要在 users/_id 目录内创建一个 index.vue 文件。

vue组件部分代码:

<div class="links">
    <router-link to="/user">用户</router-link>    
    <router-link to="/user/one">one</router-link>
    <router-link to="/user/two">two</router-link>
    <router-link to="/menvscode/comments">two</router-link>
</div>

_id.vue组件部分代码,用 $route.params.id 接受参数

<div>
    用户页面{{$route.params.id}}
</div>

comments.vue组件部分代码,用 $route.params.slug 接受参数

<div>
    评论页面{{$route.params.slug}}
</div>

params传递参数

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

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

<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>

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

<div>
    <h2>News Index page</h2>
    <p>NewsID:{{$route.params.newsId}}</p>
</div>

3、路由参数校验

Nuxt.js 可以让你在动态路由组件中定义参数校验方法。

举个例子: pages/users/_id.vue

export default {
  validate({params}){
        return /^\d+$/.test(params.slug)
    }
}

如果校验方法返回的值不为 true, Nuxt.js 将自动加载显示 404 错误页面。

想了解关于路由参数校验的信息,请参考 页面校验API


4、嵌套路由

你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。

创建内嵌子路由,你需要添加一个 Vue 文件,同时添加一个与该文件同名的目录用来存放子视图组件。

假设文件结构如:

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

Nuxt.js 自动生成的路由配置如下:

routes: [
    {
        path: "/user",
        component: _2666908e,
        children: [
            {
                path: "",
                component: _4550a834,
                name: "user"
            },
            {
                path: ":id",
	        component: _2d93279c,
                name: "user-id"
            }
        ]
    }
]

别忘了在父级 Vue 文件内增加 <nuxt-child/> 用于显示子视图内容。

user.vue组件部分代码

<div> 
    <div class="links">
        <router-link to="/user">用户</router-link>
    </div>
    <nuxt-child/>
</div>


5、动态嵌套路由

这个应用场景比较少见,但是 Nuxt.js 仍然支持:在动态路由下配置动态子路由。

假设文件结构如下:

pages/
--| _category/
-----| _subCategory/
--------| _id.vue
--------| index.vue
-----| _subCategory.vue
-----| index.vue
--| _category.vue
--| index.vue

Nuxt.js 自动生成的路由配置如下:

routes: [
{
  path: "/",
  component: _64ad481f,
  name: "index"
},
{
  path: "/:category",
  component: _579b24ac,
  children: [
    {
      path: "",
      component: _4d831398,
      name: "category"
    },
    {
      path: ":subCategory",
      component: _00b8c7c9,
      children: [
        {
          path: "",
          component: _47702ece,
          name: "category-subCategory"
        },
        {
          path: ":id",
          component: _35b93d41,
          name: "category-subCategory-id"
        }
      ]
    }
  ]
}
]
标签: Nuxt vue ssr
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码