<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>