2020-10-28

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

about文件夹下新建index.vue

<template> 
    <div> 
        <h2>About Index page</h2> 
        <ul> 
            <!-- vue中视图路由的方式实现路由 -->
            <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li> 
        </ul> 
    </div> 
</template>

news文件夹下新建index.vue

<template> 
    <div> 
        <h2>News Index page</h2> 
        <ul> 
            <!-- vue中简单方式实现路由 -->
            <li><nuxt-link to="/">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="/about">ABOUT</nuxt-link></li> 
            <li><nuxt-link to="/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="/about">ABOUT</nuxt-link></li> 
            <li><nuxt-link :to="{name:'news',params:{newsObj:newObj}}">NEWS</nuxt-link></li> 
        </ul> 
    </div> 
</template> 
<script>
export default {
    data() {
        return {
            newObj:{}
        }
    }
}
</script> 
<style></style>

在news文件夹下的index.vue里用$route.params.newsId进行接收（路由传参的接收方式与vue.js的接收方式基本相似），代码如下。

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