码迷,mamicode.com
首页 > Web开发 > 详细

nuxt.js 路由 , meta设置

时间:2018-04-04 18:20:46      阅读:5282      评论:0      收藏:0      [点我收藏+]

标签:.com   文件夹   校验   传值   说明   val   就是   传递   pos   

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‘ }
            ]
        }
    }
}

 

nuxt.js 路由 , meta设置

标签:.com   文件夹   校验   传值   说明   val   就是   传递   pos   

原文地址:https://www.cnblogs.com/hai-cheng/p/8718106.html

(6)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!