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