nuxt.js 路由 , meta设置

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

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

时间: 2024-10-29 00:51:19

nuxt.js 路由 , meta设置的相关文章

vue 路由meta 设置title 导航隐藏

router.js routes: [{ path: '/', name: 'HelloWorld', component: HelloWorld, meta: { title: "HelloWorld", 要现实的title show: true 设置导航隐藏显示 } }] App.vue <template> <div id="app"> <router-view></router-view> <bottom

Nuxt.js学习(二) --- Nuxt目录结构详解、Nuxt常用配置项、Nuxt路由配置和参数传递

[TOC] 1.Nuxt目录结构详解 Nuxt项目文件目录结构 |-- .nuxt // Nuxt自动生成,临时的用于编辑的文件,build |-- assets // 用于组织未编译的静态资源入LESS.SASS 或 JavaScript |-- components // 用于自己编写的Vue组件,比如滚动组件,日历组件,分页组件 |-- layouts // 布局目录,用于组织应用的布局组件,不可更改. |-- middleware // 用于存放中间件 |-- pages // 用于存放

Nuxt.js(开启SSR渲染)

为什么要用Nuxt? 1.SEO 我们需要搜索引擎更多地抓取到我们的内容,更详细地认识到我们的网页结构,而不是仅对首页或特定静态页进行索引.再直白点说,就是Vue.js原来是开发SPA(单页应用)的,但是随着技术的普及,很多人想用Vue开发多页应用,并在服务端完成渲染.这时候就出现了Nuxt.js这个框架,她简化了SSR的开发难度.还可以直接用命令把我们制作的vue项目生成为静态html.  Nuxt.js适合作新闻.博客.电影.咨询这样的需要搜索引擎提供流量的项目.如果你要作移动端的项目,就没

Nuxt.js开启SSR渲染

第一节:nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用Vue开发多页应用,并在服务端完成渲染,可以直接用命令把我们制作的vue项目生成为静态html. 1.那服务器端渲染到底有什么好处呢? 主要的原因时SPA(单页应用)不利于搜索引擎的SEO操作,Nuxt.js适合作新闻.博客.电影.咨询这样的需要搜索引擎提供流量的项目.如果你要作移动端的项目,就没必要使用这个框

解析Nuxt.js Vue服务端渲染摸索

本篇文章主要介绍了详解Nuxt.js Vue服务端渲染摸索,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Nuxt.js 十分简单易用.一个简单的项目只需将 nuxt 添加为依赖组件即可.Vue因其简单易懂的API.高效的数据绑定和灵活的组件系统,受到很多前端开发人员的青睐.国内很多公司都在使用vue进行项目开发,我们正在使用的简书,便是基于Vue来构建的.我们知道,SPA前端渲染存在两大痛点:(1)SEO.搜索引擎爬虫难以抓取客户端渲染的

【前端vue进阶实战】:从零打造一个流程图、拓扑图项目【Nuxt.js + Element + Vuex】 (一)

本系列教程是用Vue.js + Nuxt.js + Element + Vuex + 开源js绘图库,打造一个属于自己的在线绘图软件,最终效果:topology.le5le.com .如果你觉得好,欢迎给文章和开源库点赞,让我们更有动力去做好! 本系列教程源码地址:Github 一.创建项目框架 1. 使用Nuxt.js向导创建项目 yarn create nuxt-app topology-vue // 注意在后面提示中,上移下移,按空格选中 Element 复制代码 选择Element后,在

vue.js路由参数简单实例讲解------简单易懂

vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们提供命令行来安装 npm install vue-router --save 第二种,我们直接去官方github下载 https://github.com/vuejs/vue-router 路由参数设置 1,实例化一个路由,然后路由映射表中的地址带参数,这个参数就是路由的参数 接着给映射表中的路由设

Nuxt.js服务端渲染实践,从开发到部署

感悟 经过几个周六周日的尝试,终于解决了服务端渲染中的常见问题,也成功说服了公司新项目采用前后端分离的解决方案,当SEO不在是问题的时候,或许才是我们搞前端的真正的春天,其中也遇到了一些小坑,Nuxt.js官方还是很给力的,提issue后很积极的给予帮助,再次感谢Nuxt.js的开发团队. 解决的问题 路由鉴权 第一个拦路虎就是登陆时候的鉴权问题,如何把token保存到本地.官方使用express-session解决这个问题,但是这样做后端也需要使用nodejs,而我们公司使用的PHP.转念一想

Nuxt.js知识点

起源 最主要的原因时使用vue-cli搭建的SPA(单页应用)不利于搜索引擎的SEO操作.搜索引擎对SPA的抓取并不好,特别是百度根本没法抓取到SPA的内容页面,所以我们必须把我们的应用在服务端渲染成适合搜索引擎抓取的页面,再下载到客户端. Nuxt.js是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).再直白点说,就是Vue.js原来是开发SPA(单页应用)的,但是随着技术的普及,很多人想用Vue开发多页应用,并在服务端完成渲染.这时候就出现了Nuxt.js这个框架,她简化了