VUE SSR渲染之NuxtJS —— 路由篇

一、路由跳转

nuxt提供 nuxt-link组件进行跳转

<nuxt-link to="/home">Home page</nuxt-link>

二、基础路由

默认情况下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'
    }
  ]
}

具体看图：

此时在浏览器就可以进行对应的路由跳转。

三、动态路由

动态路由需要在文件名前面加_

具体如下：

_like.vue内容如下：

<template>
  <div>
    <h1>user/detail/like</h1>
    <h2>{{like}}</h2>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        like: ""
      }
    },
    mounted() {
      const { like } = this.$route.params
      this.like = like
    }
  }
</script>

<style>
</style>

页面显示效果

三、多级路由

多级路由和vue-router的基本一致，只不过<router-view />换成了<nuxt />

这里我们在goods里配置了一个多级路由。

 

这里的goods.vue 和 goods/index.vue 可以合并为一个文件。