vue 合集

目录

一、路由参数的传递和获取

---

一、路由参数的传递和获取

1、概念

路由：this.$router

路由参数：this.$route

2、params路由参 与 query查询参

params相当于post，浏览器地址栏看不到请求参数，但是在配置路由时一定要配置参数。

<!-- 路由配置 -->
{path：'/XXX/:参数名1/:参数名1 ', name='XXX ', component='XXX'}

<!-- 传递参数 -->
<router-link :to=“{name:'XXX', params: {参数名1：XXX，参数名2：XXX}}”>

<!-- 获取参数 -->
this.$route.params.参数名

query相当于get，浏览器地址栏可以看到请求参数。

<!-- 路由配置 -->
{path：'/XXX ', name='XXX ', component='XXX'}

<!-- 传递参数 -->
<router-link :to=“{name或者path:'XXX', query: {参数名1：XXX，参数名2：XXX}}”>

<!-- 获取参数 -->
this.$route.query.参数名

3、遇到的bug

（1）修改 params 后，页面视图不更新

解决方案：

方法一：用 watch (监测变化) $route 对象

<！-- 监听,当路由发生变化的时候执行 -->
<！-- 未测试 -->
watch:{
  $route(to,from){
        console.log(to.path);
        // 对路由变化作出响应...
  }
}

方法二：在父组件的router-view上加个key

<！-- 可行 -->
<router-view :key="$route.fullPath"></router-view>