1.路由跳转有几种方式
比如:A->B
声明式导航:router-link(务必有to属性),可以实现路由的跳转
<p>
<span>请</span>
<!-- 声明式导航:务必要有to属性 -->
<router-link to="/login">登录</router-link>
</p>
编程式导航:利用的是组件实例的$router.push|replace方法,可以试想路由的条状
2.路由传参,参数有几种写法?
第一种:字符串形式
params参数:属于路径当中的一部分,需要注意,当配置路由的时候,需要占位
query参数:不属于路径当中的一部分,类似于ajax中的quertString /home?k=v&kv= ,不需要占位
例子:
//配置路由
routes:[
{
path:"/search/:keyword",
component:Search,
meta:{show:true}
}
]
<form action="###" class="searchForm">
<input
type="text"
id="autocomplete"
class="input-error input-xxlarge"
v-model="keyword"
/>
<button class="sui-btn btn-xlarge btn-danger" type="button" @click="goSearch">
搜索
</button>
</form>
<script>
...
methods:{
//搜索按钮的回调函数:需要向search进行跳转
goSearch(){
//路由传递参数:
//第一种:字符串形式
this.$router.push('/search/' + this.keyword +"?k=" + this.keyword.toUpperCase())
}
}
...
</script>
第二种:模板字符串
methods:{
//搜索按钮的回调函数:需要向search进行跳转
goSearch(){
//路由传递参数:
//第二种:模板字符串
this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)
}
第三种:对象
/第三种:对象
this.$router.push({name:"search",params:{jeyword:this.keyword},query:{k:this.keyword.toUpperCase()}})