Vue项目中常见问题(2)路由传参的方法

目录

问题:如何在输入框输入内容后,点击搜索,跳转到搜索页面,并把输入的内容一起带到搜索页面

解决办法:

方法一: 字符串形式

params参数传递

1.在Header组件里面的index.vue中利用v-model数据的双向绑定来实现​编辑

2. 打开项目页面的控制台,可以看到$route下keyword:  后面的数据会随着input输入内容的改变而改变​编辑

 3.在router文件下的index.js中 在path后面利用/ : keyword进行占位

 4.在Header文件下的index.vue中 如下写

 5.打开项目页面控制台在首页的搜索框中输入内容

​query参数传参

1.在Header文件下的index.vue中 如下写

2.在pages下的Search文件里面的index.vue中 如下书写

 3打开项目页面控制台在首页的搜索框中输入内容

 方法二: 模板字符串

1.在Header文件下的index.vue中 如下写 也可以实现功能

方法三:对象写法(项目中用这种方法)

 1.在Header文件下的index.vue中 如下写 

2.在router文件下的index.vue中给搜索路由取个名字,name:"search"

---

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

路由的跳转

路由的跳转就两种形式：

声明式导航（router-link：务必要有to属性）

编程式导航$router.push||replace

编程式导航更好用：因为可以书写自己的业务逻辑

路由传参

params参数：路由需要占位，属于URL当中一部分

query参数：路由不需要占位，写法类似于ajax当中query参数

面试题

1:路由传递参数（对象写法）path是否可以结合params参数一起使用?

         路由跳转传参的时候,对象的写法可以是name、path形式,但是需要注意的是,path这种写法不能与params参数一起使用

例子:

this.$router.push({

        path: "/search",

        params: { keyword: this.keyword },

        query: { k: this.keyword.toUpperCase() },

      });

2:如何指定params参数可传可不传?

        如果路由要求传递params参数,但是你就不传递params参数,会发现URL有问题

        解决办法是:在配置路由的时候,在占位符的后面加上一个问号,就可以指定params参数可传可不传了

  {

    path: '/search/:keyword?',

    component: Search,

    meta:{show:true}

  },

3:params参数可以传递也可以不传递，但是如果传递是空串，如何解决？

      使用undefined解决:params参数可以传递、不传递(空的字符串)

this.$router.push({

        name: "search",

        params: { keyword: "" || undefined },

        query: { k: this.keyword.toUpperCase() },

      });

4:路由组件能不能传递props数据?

可以的:三种写法

     //布尔值写法:只有params参数支持

    // props:true,

    //对象写法:额外的给路由组件传递一些props

    // props:{a:1,b:2}

    //函数写法:可以把params参数、query参数,通过props传递给路由组件

    props:($route)=>({keyword:$route.params.keyword,k:$route.query.k})

 

问题一:如何在输入框输入内容后,点击搜索,跳转到搜索页面,并把输入的内容一起带到搜索页面

解决办法: