Nuxt.js开启SSR渲染的教程详解(3)

日期：2020-05-11 栏目：程序人生浏览：次

（2）在news文件夹下新建index.vue文件，并写入下面的代码：

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

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

<template>
 <div>
 <ul>
  <li><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >HOME</a></li>
  <li><a href="/about" rel="external nofollow" >ABOUT</a></li>
  <li><a href="/news" rel="external nofollow" >NEWS</a></li>
 </ul>
 </div>
</template>
<script>
export default {
 components: {
 }
}
</script>
<style>
</style>

由于Nuxt.js都为我们作好了，不用写任何配置代码。所以我们可以在页面上实现相关跳转。

2.<nuxt-link>标签

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

<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 {
 components: {
 }
}
</script>
<style>
</style>

我们再次预览页面，也是可以进行正常跳转的，在实际开发中尽量使用标签的方法跳转路由。

3.params传递参数

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

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

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

转载注明出处：http://www.heiqu.com/286.html

Nuxt.js开启SSR渲染的教程详解(3)

相关推荐