vue传参数PHP,Vue Router 传递参数

在访问网站的时候，你可能会发现有的页面的 html 或 php 文件后面会有一些以 ? 开头的文本，这就是页面之间传递参数的方式。在 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 标签来传递参数：Java

PHP

上面两个链接的地址都指向了 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 标签来传递参数：Java

PHP

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

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

下面使用 JS 跳转的方式来传递参数：this.$router.push({

name: 'category',

query: {

user: 'jack',

lan: 'java'

}

})

name 也可以换成 path 。

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

query 方式传递参数，地址栏中的 URL 如下：http://xxx.com?user=jack&lan=java

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

响应路由参数的变化

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

如果需要在参数改变的情况下触发某个函数就需要用 watch 来监听 $route 的变化，如下：export default {

name: 'category',

watch: {

$route() {

// 当参数改变时就会执行 $route

}

}

}

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

相关文章：