关于Nuxt路由设置及传参

首先在pages路径下建立about.vue，news.vue，和index.vue文件，并在index.vue里引用三个link


运行打开页面可以发现路由生效，并可以通过a标签进行跳转。

下面我们利用nuxt的写法，将a标签写成下面的形式：

1
<nuxt-link :to = "{name: 'index'}">HOME</nuxt-link>

打开画面验证，效果是一样的。

下面进行画面间的传参。在给news的link上传一个参数params的对象，newsId = 3306

1
<nuxt-link :to = "{name: 'news', params:{newsId:3306}}">HOME</nuxt-link>
然后在news.vue里接受参数，并显示。在这里是使用双花括号进行显示，也可以通过js里进行设置之后再显示。 
1
{{$router.params.newsId}}

运行，打开页面，发现传递的参数newsId已经被news页面接受到并成功显示了。


以上!！