nuxt的路由系统和vue的路由系统在使用上有什么区别

whisper
95 阅读2分钟

Nuxt.js 的路由系统基于 Vue Router，并在其基础上进行了扩展和优化，以更好地适应服务端渲染和应用开发的需求。以下是 Nuxt.js 路由系统和 Vue 路由系统在使用上的一些区别：

路由定义方式

  • Vue：通常在router/index.js文件中手动定义路由，通过VueRouter构造函数传入路由配置数组来创建路由实例。每个路由配置对象包含path、component等属性，例如：

javascript

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;
  • Nuxt：采用文件系统路由，根据pages目录下的文件结构自动生成路由。例如，pages/index.vue对应根路由/，pages/about.vue对应/about路由。如果是嵌套路由，可通过创建子目录来实现，如pages/users/_id.vue表示动态路由/users/:id。

动态路由

  • Vue：定义动态路由时，需要在路由配置中使用冒号:指定参数名，如{ path: '/user/:id', component: UserDetail }。在组件中通过$route.params.id获取参数值。
  • Nuxt：在文件系统路由中，动态路由通过在文件名中使用下划线_来表示，如pages/users/_id.vue。在组件中可以通过this.$route.params.id获取参数值，也可以使用asyncData或fetch方法中的context.params.id来获取。

路由导航守卫

  • Vue：有全局守卫（beforeEach、afterEach等）、路由独享守卫（beforeEnter）和组件内守卫（beforeRouteEnter、beforeRouteLeave等）。通过在路由配置或组件中定义相应的守卫函数来实现路由导航的控制。
  • Nuxt：也支持全局守卫，在nuxt.config.js文件中通过router.beforeEach等属性来定义。同时，Nuxt.js 还提供了一些特殊的守卫，如middleware，可以在路由导航过程中执行一些中间件逻辑，例如身份验证、权限检查等。中间件可以在middleware目录下创建文件来定义，然后在路由组件中通过middleware属性指定使用的中间件。

页面过渡效果

  • Vue：需要通过transition组件和相关的 CSS 类来实现页面过渡效果，在路由切换时手动添加和移除过渡类。
  • Nuxt：内置了页面过渡效果，可以在nuxt.config.js中通过transition属性进行全局配置，也可以在单个页面组件中通过transition选项来覆盖全局配置。例如，以下是在nuxt.config.js中配置页面过渡效果的示例：

javascript

export default {
  // 其他配置项
  transition: {
    name: 'fade',
    mode: 'out-in'
  }
};

服务端渲染相关

  • Vue：主要用于客户端路由和渲染，如果要实现服务端渲染，需要额外配置和处理，涉及到服务器端的路由匹配、组件渲染等复杂逻辑。
  • Nuxt：天生支持服务端渲染，路由系统在服务端和客户端的行为是统一的。在服务端渲染时，Nuxt.js 会根据路由配置和请求路径，在服务器端渲染出相应的页面内容，然后发送给客户端。同时，在客户端也能正确地处理路由切换和页面更新，实现同构应用。
avatar
文章
阅读
粉丝