nuxt.js 路由 ， meta设置

Posted 2020-10-29 M.r Huang

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

我做了一个小例子：大家看一下就明白了

 

    <section class="container">

　　　　　路由传值可以通过 $route.params.id 来接收参数。　

        <!-- 路由传值一个数组 idList ；
　　　　　　　　首先声明一个数组[{name:‘张三‘}，{name:‘李四‘},{name:‘王五‘}] 
　　　　　　　　然后同级创建一个demo1.vue文件，里边内容自定义 
　　　　　-->
        <nuxt-link :to="{name: ‘demo1‘ , params: {id: this.idList}}">demo1</nuxt-link><br>  

        <!-- 路由传值 同级创建一个demo2.vue 里边内容自定义； 
　　　　　　　　demo2.vue文件内通过 $route.params.id 拿到 456 
　　　　　-->
        <nuxt-link :to="{name: ‘demo2‘ , params: {id: 456}}">demo1</nuxt-link><br>

        <!-- 多一个文件夹层级 project 下创建一个 demo3.vue； 
　　　　　　　　路由用 - 链接为  project-demo3 ; 
　　　　　　　　该demo3 是一个组件，传入的id为传值 
　　　　　-->
        <nuxt-link :to="{name: ‘project-demo3‘ , params: {id: 789789}}">project-demo1</nuxt-link><br>

　　　　　动态路由有一点需要说明一下：
　　　　　以下画线为前缀的Vue文件就是动态路由，然后在文件里边有 $route.params.id 来接收参数。　
　　　　　所以以下例子就是 文件夹project1 下有一个 _newsId.vue 文件　　　　

        <!-- 动态路由 动态路由 动态路由 重要的说三遍，
　　　　　　　　同样的看到了 project1-newsId  这个中划线后边的newsId不是一个组件，
　　　　　　　　而是动态传入的路由参数 
　　　　　-->
        <nuxt-link :to="{name: ‘project1-newsId‘, params: {newsId: ‘nuxt-link动态路由‘}}">动态路由newsId </nuxt-link><br> 

        <a href="/project1/我是a超链接"> a超链接 动态路由 newsId </a>
    </section>

动态路由参数校验

进入一个页面，对参数传递的正确性校验是必须的，Nuxt.js也贴心的为我们准备了校验方法 validate( )。

export default {
 
  validate ({ params }) {
    // 必须为全数字
    return /^\d+$/.test(params.newsId)
  }
 
}

 

单个组件meta设置

通过路由传过来的 title ； 在head方法里边配置；注意 hid 的值要与nuxt.config.js 里边的一样，要不然会重复创建，对搜索引擎不友好

export default {
    data () {
        return  {
            title: this.$route.params.title
        }
    },
    head () {
        return {
            title: this.title,
            meta: [
                { hid: ‘description‘, name: ‘description‘, content: ‘hi-Sen‘ }
            ]
        }
    }
}