Nuxt的路由配置和参数传递

学习前端框架都要学习路由机制，因为路由可以体现我们的业务逻辑，把模块串联起来，让程序换发光彩。那简单的说路由就是我们的跳转机制，也可以简单理解成链接跳转。Nuxt.js的路由并不复杂，它给我们进行了封装，让我们节省了很多配置环节。

简单路由Demo
我们现在在根目录的pages文件下新建两个文件夹，about和news(模仿关于我们和新闻的功能模块)

在about文件夹下新建index.vue文件，代码如下：

<template>
    <div>
        <h2>About Index page</h2>
        <ul>
            <li><a href="/">Home</a></li>
        </ul>
    </div>
</template>

在news文件夹下新建index.vue文件，代码如下：

<template>
    <div>
        <h2>News Index page</h2>
        <ul>
            <li><a href="/">Home</a></li>
        </ul>
    </div>
</template>

修改原来的pages文件夹下的index.vue，删除没用的代码，写入下面链接代码：

<template>
  <div>
    <ul>
      <li><a href="/">HOME</a></li>
      <li><a href="/about">ABOUT</a></li>
      <li><a href="/news">NEWS</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  comments:{}
}
</script>

<style lang="less" scoped>

</style>

结果如下：

<nuxt-link>标签
虽然上面的例子跳转已经成功，但是Nuxt.js并不推荐这个中<a>标签的作法，它为我们准备了<nuxt-link>标签（vue中叫组件）。我们<a>标签替换成<nuxt-link>

about文件夹下新建index.vue

<template>
    <div>
        <h2>About Index page</h2>
        <ul>
            <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
        </ul>
    </div>
</template>

news文件夹下新建index.vue

<template>
    <div>
        <h2>News Index page</h2>
        <ul>
            <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
        </ul>
    </div>
</template>

pages文件夹下的index.vue

<template>
  <div>
    <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'}">NEWS</nuxt-link></li>
    </ul>
  </div>
</template>

<script>
export default {
}
</script>

<style>

</style>

params传递参数

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

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

<template>
  <div>
    <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>
  </div>
</template>
<script>
export default {
  components: {
  }
}
</script>
<style>
</style>

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

<template>
  <div>
      <h2>News Index page</h2>
      <p>NewsID:{{$route.params.newsId}}</p>
       <ul>
        <li><a href="/">Home</a></li>
      </ul>
  </div>
</template>