params传递参数时，地址栏没有发生改变

问题遇到的现象和发生背景

params传递参数时，地址栏没有发生改变

问题相关代码，请勿粘贴截图

<template>
  
  <header class="header">
    
    <div class="top">
      <div class="container">
        <div class="loginList">
          <p>尚品汇欢迎您！p>
          <p>
            <span>请span>
            <router-link to="/login">登录router-link>
            <router-link to="/register" class="register">免费注册router-link>
          p>
        div>
        <div class="typeList">
          <a href="###">我的订单a>
          <a href="###">我的购物车a>
          <a href="###">我的尚品汇a>
          <a href="###">尚品汇会员a>
          <a href="###">企业采购a>
          <a href="###">关注尚品汇a>
          <a href="###">合作招商a>
          <a href="###">商家后台a>
        div>
      div>
    div>
    
    <div class="bottom">
      <h1 class="logoArea">
        <router-link class="logo" title="尚品汇" to="/home">
          <img src="./images/logo.png" alt="" />
        router-link>
      h1>
      <div class="searchArea">
        <form action="###" class="searchForm">
          <input
            v-model="keyword"
            type="text"
            id="autocomplete"
            class="input-error input-xxlarge"
          />
          <button
            class="sui-btn btn-xlarge btn-danger"
            type="button"
            @click="goSearch"
          >
            搜索
          button>
        form>
      div>
    div>
  header>
template>

<script>
export default {
  name:"Header",
  data() {
    return {
      keyword: "",
    };
  },
  methods: {
    goSearch() {
      this.$router.push({
        name: "search", params: { keyword: this.keyword||undefined },
        });

    }
  
  },
};
script>

router/index.js

 {
            // ?表示可以传递params或者不传递params
            path: "/search/:keyWord?",
            component: Search,
            meta: {
                show: true
            },
            name: "search",
            
        },

运行结果及报错内容

我想要达到的结果

地址栏能有搜索栏所传入的参数,例如搜索框中为小米则地址栏为http://localhost:8081/#/search/小米，
能解释下为什么，地址栏未显示/小米

麻烦看清楚大小写， keyword 的 k 到底要不要大写？

我试了下，我这边是可以正常显示的（vue-router使用版本3.1.0），你检查下路由配置里面，有没有配置了两个search，这个没生效

//配置路由的地方
import Vue from 'vue'
import VueRouter from 'vue-router'
//防止点击过多报错

//先将VueRouter原型对象保存一份
const originPush = VueRouter.prototype.push;
//重写push|replace  location为往哪跳转
VueRouter.prototype.push = function (location, resolve, reject) {
    if (resolve && reject) {
        originPush.call(this, location, resolve, reject)
    } else {
        originPush.call(this, location, () => { }, () => { })
    }
}
const originreplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function (location, resolve, reject) {
    if (resolve && reject) {
        originreplace.call(this, location, resolve, reject)
    } else {
        originreplace.call(this, location, () => { }, () => { })
    }
}
//使用插件
Vue.use(VueRouter);

//引入路由组件
import Home from '@/pages/Home'
import Login from '@/pages/Login'
import Register from '@/pages/Register'
import Search from '@/pages/Search'
//配置路由
export default new VueRouter({
    //配置路由
    routes: [
        {
            path: "/home",
            component: Home,
            meta: {
                show: true
            }
        },
        {
            path: "/login",
            component: Login,
            meta: {
                show: false
            }
        },
        {
            path: "/register",
            component: Register,
            meta: {
                show: false
            }
        },
        {
            // ?表示可以传递params或者不传递params
            path: "/search/:keyWord?",
            component: Search,
            meta: {
                show: true
            },
            name: "search",
       
        },
        //重定向,在醒目跑起来的时候，访问/，立马让他重定向到首页
        {
            path: "*",
            redirect: "/home"
        }
    ]
})

vue-router我也给换成3.1.0了

看看这个，使用query试试