技术知识库

主题

Nuxt.js 路由 ​

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

一、静态路由 ​

假设 pages 的目录结构如下：

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

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

js
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",
    },
  ];
}

二、动态路由 ​

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

以下目录结构：

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

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

js
router: {
  routes: [
    {
      name: "index",
      path: "/",
      component: "pages/index.vue",
    },
    {
      name: "users-id",
      path: "/users/:id?",
      component: "pages/users/_id.vue",
    },
    {
      name: "slug",
      path: "/:slug",
      component: "pages/_slug/index.vue",
    },
    {
      name: "slug-comments",
      path: "/:slug/comments",
      component: "pages/_slug/comments.vue",
    },
  ];
}

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

三、嵌套路由 ​

创建内嵌子路由，需要增加一个vue文件，同时增加一个与该文件同名的文件夹用来存放子视图组件

在父组件内增加 <nuxt-child/> 用于显示子视图内容

目录结构

text
pages/
--| home/
-----| user
--------| _id.vue
-----| homepage.vue
--| home.vue
--| index.vue

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

js
routes: [{
  path: "/home",
  component: _f7c0aaaa,
  name: "home",
  children: [{
    path: "homepage",
    component: _088c394e,
    name: "home-homepage"
  }, {
    path: "user/:id?",
    component: _3d40d6f4,
    name: "home-user-id"
  }]
},{
  path: "/",
  component: _5412ee36,
  name: "index"
}],

四、命名视图 ​

要渲染命名视图，您可以在布局(layout) / 页面(page)中使用 <nuxt name="top"/> 或 <nuxt-child name="top"/> 组件。要指定页面的命名视图，我们需要在nuxt.config.js文件中扩展路由器配置：

具体看官网：https://www.nuxtjs.cn/guide/routing

五、路由参数校验 ​

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

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

js
export default {
  validate({ params }) {
    // 必须是number类型
    return /^\d+$/.test(params.id);
  },
};

如果校验方法返回的值不为 true或Promise中 resolve 解析为false或抛出 Error ， Nuxt.js 将自动加载显示 404 错误页面或 500 错误页面。

六、过渡动效 ​

1. 全局过渡动效设置 ​

提示 :Nuxt.js 默认使用的过渡效果名称为 page

如果想让每一个页面的切换都有淡出 (fade) 效果，我们需要创建一个所有路由共用的 CSS 文件。所以我们可以在 assets/css 目录下创建这个文件：

在全局样式文件 assets/css/main.css 里添加一下样式：

css
.page-enter-active,
.page-leave-active {
  transition: opacity 0.5s;
}
.page-enter,
.page-leave-active {
  opacity: 0;
}

然后增加到nuxt.config.js中

js
module.exports = {
  css: ["@/assets/css/main.css"],
};

2. 页面过渡动效设置 ​

如果想给某个页面自定义过渡特效的话，只要在该页面组件中配置 transition 字段即可：

在全局样式 assets/css/main.css 中添加一下内容：

css
.test-enter-active,
.test-leave-active {
  transition: opacity 0.5s;
}
.test-enter,
.test-leave-active {
  opacity: 0;
}

然后我们将页面组件中的 transition 属性的值设置为 test 即可：

js
export default {
  transition: "test",
};

提示：对于嵌套路由，如果外层设置了页面过渡效果，里面的子路由是不继承该过渡效果的

七、中间件 ​

中间件是一个JS文件，放在middleware目录中，可以使用函数定义一个页面的中间件，会在页面初始化之前调用（类似于导航守卫）

middleware/auth.js

js
export default function (context) {
  context.userAgent = process.server
    ? context.req.headers["user-agent"]
    : navigator.userAgent;
}

middleware/stats.js

中间件异步执行

js
import axios from "axios";
//统计PV
export default function ({ route }) {
  return axios.post("http://my-stats-api.com", {
    url: route.fullPath,
  });
}

全局配置

nuxt.config.js

js
module.exports = {
  router: {
    middleware: "stats",
  },
};

也可以将middleware添加到指定的布局或页面

js
export default {
  middleware: "stats",
};

八、命名式导航 ​

在页面之间使用路由，建议使用<nuxt-link>，而不是采用<a>标签

html
<nuxt-link to="/home">Home</nuxt-link></li>

九、编程式导航 ​

js
this.$router.push("/about");

十、路由传值 ​

通过动态路由匹配传的值，都在上下文context的params对象中，通过query传的值都在context的query

1. 声明式导航传值 ​

（1）只传params ​

_id.vue

html
<nuxt-link to="/about/123">ABOUT</nuxt-link>

params:{id:123}

（2）只传query ​

about.vue

html
<nuxt-link :to="{path:'/about',query:{title:'关于我们'}}">ABOUT</nuxt-link></li>

query:{title:'关于我们'}

（3）传params与query ​

_id.vue

html
<nuxt-link :to="{path:'/about/123',query:{title:'关于我们'}}">ABOUT</nuxt-link></li>

params:{id:123} query:{title:'关于我们'}

2. 编程式传值 ​

（1）只传params ​

_id.vue

js
this.$route.push("/about/123");

params:{id:123}

（2）只传query ​

js
this.$route.push({
  path: "/about",
  query: {
    title: "关于我们",
  },
});

query:{title:'关于我们'}

（3）传query与params ​

_id.vue

js
this.$router.push({
  path: "/about/123",
  query: {
    id: 111,
  },
});

params:{id:123} query:{title:'关于我们'}