nuxt动态设置关键词，描述，标题

下面以一个新闻详情的meta信息设置为例：

首先从列表传参到详情页面获取meta信息，然后再通过this绑定到页面上。

/new页面,传id参数到new-id页面

来点假数据吧

详情页面接收参数，从后台接口获取关键词，描述，标题

来点假数据吧

设置head

这样就设置完成了。

1、安装@gauseen/nuxt-proxy包依赖

cnpm install @gauseen/nuxt-proxy --save

2.设置nuxt.config.js

修改modules为

modules: [

"@gauseen/nuxt-proxy"

]

3.增加 proxyTable属性

proxyTable: {

"/api": {

target: ' https://xxxxx.com' ,

changeOrigin: true,

ws: false,

pathRewrite: {

"^/api": "/api"

}

}

}

Nuxt.js的路由并不复杂，它给我们进行了封装，让我们节省了很多配置环节。

如果想查看路由的配置，可以到 .nuxt 文件中可以看到详细配置

第一种：   

 /意思是跳到pages文件下的index页（页面在最外层）          /about  意思是跳到about文件夹下的index页   

第二种：

nuxt-link        name的值对应文件中的index页面

参数传递

<nuxt-link :to="{name='about',params={newsId:1002}}"></nuxt-link>

接收参数

{{$route.params.newsId}}

1.     to                      name是指向对应文件夹的index页，而path功能更全，更好玩，（写动态路由更方便，传参都一样）

等于

2.replace                      设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录

3.append                变成当前 (相对) 路径       我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

4.tag               有时候想要  渲染成某种标签，例如<li>  于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航

可查考  Vue router  官方

在动态路由页面下script -- export default中  写方法  vaildate

export default {

    validate ({params}){                              //路由当参传入

        return /^\d+$/.test(params.newid)      //正则比较

    }

}

---