问题遇到的现象和发生背景
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/小米，
能解释下为什么，地址栏未显示/小米
