vue中监听路由参数的变化10bet

来源:http://www.chinese-glasses.com 作者:Web前端 人气:54 发布时间:2020-03-24
摘要:时间: 2019-11-05阅读: 69标签: 参数 现在大多数开发都是基于 Vue 或者 React开发的,能够达到快速开发的效果,也有一些不足的地方, Nuxt能够在服务端做出渲染,然后让搜索引擎在爬取数据

时间: 2019-11-05阅读: 69标签: 参数

现在大多数开发都是基于 Vue 或者 React 开发的,能够达到快速开发的效果,也有一些不足的地方, Nuxt 能够在服务端做出渲染,然后让搜索引擎在爬取数据的时候能够读到当前页面。

在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新。

首先要说明一点,我们可以认为我们所编写的 Vue 项目是一个服务端的项目,虽然编写的还是 Vue 项目,但是 Nuxt 是基于服务器环境的。

mounted: () ={ this.id = this.$route.query.id; this.getdetail()}

就简单的说一下 Nuxt 使用。基础只是还是以官方文档为主,如果博客中哪里有问题,欢迎留言指正。

getDetail()方法中会用到this.id这个参数,在同一页面切换id的值,并不会触发vue的声明周期函数。

说了这么多,进入正题。

可以添加路由监听:

路由

watch: { $route: { handler() { this.id = this.$route.query.id; this.getDetail(); //深度监听,同时也可监听到param参数变化 }, deep: true, } }

10bet,与传统的 Vue 项目不同的是,我们在使用 Vue 的时候需要配置 Vue-Router 信息,在 Nuxt 有很关键的一点就是 约定优于配置 。 page 目录下的所有 *.vue 文件会自动生成路由配置。

在项目初始化之后,在 pages 下面默认有一个 index.vue 文件,所以当我们使用 npm run dev 启动项目,并且使用 http://localhost:3000/ 访问的时候能够正常访问路由。

为了证实上面这一点,在 pages 下面创建一个信息 about.vue 文件,并且 http://localhost:3000/about 去访问刚刚写的页面。我们可以按照正常的 Vue 页面去开发就好了。

page目录

├─page│ ├─index.vue└───└─about.vue

  This About 

创建完成之后使用 http://localhost:3000/about 访问该页面,页面能够正常的渲染出来了。就会看到 This About 显示在页面中。

做到这一步之后就应该实现路由之间的跳转了。 Vue 开发过程中,都是使用 router-link 标签完成路由之间的跳转,在 Nuxt 也同样可以使用 router-link ,但是 Nuxt 仍然推荐使用 nuxt-link , nuxt-link 与 router-link 的功能是等效的。

可能会有一些疑问,既然是等效的,为什么要使用 nuxt-link 呢?官方文档中是这样说的:将来我们会为 nuxt-link 组件增加更多的功能特性,例如资源预加载,用于提升 nuxt.js 应用的响应速度。显然嘛,官方不会无缘无故的就做出这么一个东西来,肯定实在其中做了很多的优化工作的。

稍微的改动一下刚才的 about.vue 在里面添加两个标签,一个使用 nuxt-link ,一个使用 router-link 看下能否正常完成跳转。

about.vue - 更改后

  This About 首页 首页 

既然从路由开始那么就不得不说到子路由,全局路由守卫这些都些在路由中经常用到的应该怎么处理?该怎么解决这些问题。

前面既然说到了 Nuxt 会把 pages 文件夹下面的所有 *.vue 文件编译成路由,那么子路由需要使用文件夹嵌套才行。

接下来就尝试一下。首先要更改一下 pgeas 目录结构。

page目录

├─page│ ├─about│ │ ├─detail.vue│ │ └─index.vue└───└─index.vue

注意上面的 about 目录,是 index.vue 而并非 about.vue ,这里的 index.vue 指的是 about 路由下的首页,也就是最开始放在与 index.vue 同级的那个 about.vue 是一样的效果。

about/index.vue

  This About 首页 首页 about/detail.vue  This Detail 

现在如果我们想要访问刚才的那两个路由地址分别就是 http://localhost:3000/abouthttp://localhost:3000/about/detail 就能看到刚才编写的 page 页面了。

如果想要看路由生成到底是什么样子的?可以在根目录下有一个 .nuxt 文件夹,在里面可以看到一个 router.js ,这个文件夹下面就是 Nuex 生成好的路由信息。

打开文件后翻到最后会有一段这样的代码,是不是很眼熟?这是不就是在编写 Vue 项目的时候配置的哪些路由文件么?

router.js

export function createRouter() { return new Router({ mode: 'history', base: decodeURI, linkActiveClass: 'nuxt-link-active', linkExactActiveClass: 'nuxt-link-exact-active', scrollBehavior, routes: [{ path: "/about", component: _9ceb4424, name: "about" }, { path: "/about/detail", component: _18146f65, name: "about-detail" }, { path: "/", component: _d3bf5a4e, name: "index" }], fallback: false })}

有了这个文件的话我们就可以清楚的知道,路由的结构了。不仅仅这样,还可以使用 name 去实现路由的跳转了。

需要注意的是,如果你的路由是有文件夹嵌套的话, Nuxt 是用使用 - 来拼接路由的 name 名称的,但是文件夹内部的 index.vue 会直接已文件夹的名字作为 name 。一旦知道了路由的 name ,这样我们就可以使用命令的方式跳转路由了。

再次更改一下 about/index.vue 。

about/index.vue

  This About 详情 首页 跳转到详情 export default { methods: { onClick() { this.$router.push({name:"about-detail"}) } }}

使用路由访问 http://localhost:3000/about 地址,分别点击详情、首页与 button ,都是能够正常跳转的,与之前的 Vue 开发是完全没有任何区别的。在 vue-router 中有一个很重要的一个点就是 动态路由 的概念,如果想要实现动态路由应该怎么处理呢?

如果想要在 Nuxt 中使用动态路由的话,需要在对应的路由下面添加一个 _参数名.vue 的文件,在 about 文件下面添加一个 _id.vue

page目录

├─page│ ├─about│ │ ├─detail.vue│ │ ├─_id.vue│ │ └─index.vue└───└─index.vue

新建完成之后在去 router.js 中看一下更改后的路由结构

export function createRouter() { return new Router({ mode: 'history', base: decodeURI, linkActiveClass: 'nuxt-link-active', linkExactActiveClass: 'nuxt-link-exact-active', scrollBehavior, routes: [{ path: "/about", component: _9ceb4424, name: "about" }, { path: "/about/detail", component: _18146f65, name: "about-detail" }, { path: "/about/:id", component: _6b59f854, name: "about-id" }, { path: "/", component: _d3bf5a4e, name: "index" }], fallback: false })}

可以明显的看到在 /about/:id 这个路由,明显的变化不止这些变动的还有 name: "about-id" 不再是之前的 name:about 了。如果想要使用这个 id 的话必须在 _id.vue 中才能获取到。

**_id.vue**

  {{$route.params.name}} {{$route.params.id}} 

在 _id.vue 中编写以上代码并使用 http://localhost:3000/about/ABC ,可以看到在页面中已经展示了当前的 id 值。

在实际开发过程当中可能 params 可能会有多个参数,又应该怎么处理呢?

// id为可选参数├─page│ ├─about│ │ ├─_name| | | └─_id| | | └─index.vue│ │ └─index.vue└───└─index.vue

**about - _name - _id.vue**

  {{$route.params.name}} {{$route.params.id}} 

弄完之后看下 router.js 的变化

export function createRouter() { return new Router({ mode: 'history', base: decodeURI, linkActiveClass: 'nuxt-link-active', linkExactActiveClass: 'nuxt-link-exact-active', scrollBehavior, routes: [{ path: "/about", component: _9ceb4424, name: "about" }, { path: "/about/detail", component: _18146f65, name: "about-detail" }, { path: "/about/:name", component: _2ec9f53c, name: "about-name" }, { path: "/about/:name/:id", component: _318c16a4, name: "about-name-id" }, { path: "/", component: _d3bf5a4e, name: "index" }], fallback: false })}

这里展示的是第二种情况, id 为必选参数的情况,路由被编译的结果。

虽然路由已经添加了参数,但是 id 属性不是必填属性,这样的话不能满足项目需求又要如何处理呢?很简单的,在 _id.vue 文件同目录下添加一个 index.vue 文件就可以了。

本文由10bet发布于Web前端,转载请注明出处:vue中监听路由参数的变化10bet

关键词:

频道精选

最火资讯