72 lines
1.9 KiB
Vue
72 lines
1.9 KiB
Vue
<template>
|
|
<div>
|
|
这是首页
|
|
<!-- <a href="/#/user">到user</a> -->
|
|
<!-- vue router 中 跳转页面 用router-link -->
|
|
<!-- 声明式导航 -->
|
|
用户名:<input v-model="user" type="text" name="" id="">
|
|
<router-link to="/user">到user</router-link>
|
|
<!-- 编程式导航 -->
|
|
<!-- js 跳转 -->
|
|
<!-- 事件 -->
|
|
<button @click="touser">点我跳转到user</button>
|
|
<button @click="back">返回上一页</button>
|
|
<button @click="next">去下一页</button>
|
|
<button @click="list.reverse()">反转数组</button>
|
|
<ul class="app">
|
|
<li v-for="(item,index) in list" :key="index"><span>{{item.name}}</span><input type="text" name="" id=""></li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:"PageIndex",
|
|
data(){
|
|
return {
|
|
user:"",
|
|
list:[{
|
|
name:"小白",age:16
|
|
},{
|
|
name:"小明",age:18
|
|
},]
|
|
}
|
|
},
|
|
methods:{
|
|
chuancan(index){
|
|
this.$router.push({
|
|
path:"user",
|
|
query:{
|
|
canshuming:this.list[index]
|
|
}
|
|
})
|
|
},
|
|
touser(){
|
|
//
|
|
// location.href = "/user"
|
|
// vuerouter
|
|
// this.$router.push("/user?user=" + this.user)
|
|
this.$router.push({
|
|
path:"/user",
|
|
query:{
|
|
canshuming:this.user,
|
|
canshuer:123456
|
|
}
|
|
})
|
|
// 传参
|
|
// this.$router.push({path:"/user"})
|
|
// this.$router.replace("/user")
|
|
},
|
|
back(){
|
|
// 前进 后退
|
|
this.$router.go(-1)
|
|
},
|
|
next(){
|
|
this.$router.go(1)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style> |