目录

在访问网站的时候,你可能会发现有的页面的 htmlphp 文件后面会有一些以 ? 开头的文本,这就是页面之间传递参数的方式。在 Vue 中对于使用了路由的动态组件来说,在跳转的时候也需要通过 URL 来传递参数。

下面就简单写一下 Vue 路由传递参数的方式。

通过 params 传递参数

下面使用 home 组件给 category 组件传递参数,路由配置如下:

const router = new routes({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
      path: '/category/:id',
      name: 'category',
      component: category
    }
  ],
  mode: 'history'
})

注意 /category 后面的 /:id ,接收参数的组件路径后面需要包含 /:id

下面使用 router-link 标签来传递参数:

<router-link to="/category/java">Java</router-link>
<router-link to="/category/php">PHP</router-link>

上面两个链接的地址都指向了 category 组件,组件路径后面的 / 后面的内容就是参数值。第一个链接传递的是 java ,第二个链接传递的是 php

下面通过 JS 跳转的方式来传递参数:

this.$router.push({
  path: '/category/java'
})

上面传递的参数是 java

上面只是简单演示,所以参数都是写死的,实际开发中可能需要动态拼接参数。

上面给 category 组件传递参数,category 组件可以使用 this.$route.params.id 来接收参数。

s使用 params 方式传递参数,地址栏显示的地址如下:

http://xxx.com/category/java

最后的 java 就是参数。

使用 query 传递参数

在传递多个参数的情况下,使用 query 要更方便。

下面还是用 home 组件给 category 组件传递参数,路由配置如下:

const router = new routes({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
      path: '/category',
      name: 'category',
      component: category
    }
  ],
  mode: 'history'
})

下面使用 router-link 标签来传递参数:

<router-link :to="{name: 'category', query: {user: 'jick', 'lan': 'java'}}">Java</router-link>
<router-link :to="{name: 'category', query: {user: 'jick', 'lan': 'php'}}">PHP</router-link>

router-linkto 属性如果要传入对象的话前面需要加 :

name 的值就是路由配置中配置的组件 namequery 的值是一个对象,其中包含了参数名和参数值。上面分别传递了 userlan 两个参数。

下面使用 JS 跳转的方式来传递参数:

this.$router.push({
  name: 'category',
  query: {
    user: 'jack',
    lan: 'java'
  }
})

name 也可以换成 path

category 组件可以使用 this.$route.query.userthis.$route.query.lan 来接收参数,其中的 userlan 就是参数名。

query 方式传递参数,地址栏中的 URL 如下:

http://xxx.com?user=jack&lan=java

如果要传递中文或符号的话,建议先对参数值进行 URL 编码,接收的时候再解码。

响应路由参数的变化

如果只是参数改变 组件路由不变的话,组件是不会重新加载的,组件定义的钩子函数也不会执行。对于分页加载数据的组件来说,改变参数钩子函数也不会执行,即便点击浏览器的前进和后退组件也不会重新加载,只能刷新网页。

如果需要在参数改变的情况下触发某个函数就需要用 watch 来监听 $route 的变化,如下:

export default {
  name: 'category',
  watch: {
    $route() {
      //  当参数改变时就会执行 $route
    }
  }
}

当地址栏的参数改变时就会触发 $route 方法。

相关文章:

版权声明:本文为原创文章,版权归 Mr. Ma's Blog 所有,转载请联系博主获得授权!
本文地址:https://www.misterma.com/archives/848/
如果您对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。
最后编辑:2020年04月29日 ©著作权归作者所有

发表评论

正在加载 Emoji