vue-cli3:多种方式实现页面跳转
<template><div><div>我们的页面是:</div><router-link class="to" to="/?id=1">首页</router-link><router-link class="to" to="/detail?=2">详情页</ro...
·
<template>
<div>
<div>我们的页面是:</div>
<router-link class="to" to="/?id=1">首页</router-link>
<router-link class="to" to="/detail?=2">详情页</router-link>
<router-link class="to" to="/list?id=3">列表</router-link>
<router-link class="to" to="/detail?id=2" replace>replace</router-link>
<router-link to="/?id=1&name=hhhen ">首页</router-link>
<router-link to="/detail?=2&age=22">详情页</router-link>
<router-link to="/list?id=3&weight=33">列表</router-link>
<!-- 写成对象的形式 -->
<router-link :to="{name:'home',query:{title:'Home',id:1}}">首页</router-link>
<router-link :to="{name:'detail',query:{title:'Detail',id:2}}">详情页</router-link>
<router-link :to="{name:'list',query:{title:'List',id:3}}">列表</router-link>
<!-- 第一种方式 to填写路由的path路径 -->
<router-link class="menu" to="/">首页</router-link>
<router-link to="/detail">详情页</router-link>
<router-link to="/list">列表</router-link>
<!-- 第二种方式 to填写路由的path路径 -->
<router-link :to="{path:'/'}">首页</router-link>
<router-link :to="{path:'/detail'}">详情页</router-link>
<router-link :to="{path:'/list'}">列表</router-link>
<!-- 第三种方式 to填写路由的path路径 -->
<router-link :to="{name:'home'}">首页</router-link>
<router-link :to="{name:'detail'}">详情页</router-link>
<router-link :to="{name:'lists'}">列表</router-link>
<br/>
<!-- 第四种方式 通过js跳转 path-->
<button @click="pathTo('/')">home</button>
<button @click="pathTo('/detail')">detail</button>
<button @click="pathTo('/list')">list</button>
<!-- <button @click="back">返回</button>
<button @click="replaceDetail">替换到Detail</button>
<br/>
<button @click="pathToHome">home</button>
<button @click="pathToDetail">detail</button>
<button @click="pathToList">list</button> -->
<!-- 第五种方式 通过js跳转 path-->
<button @click="nameTo('home')">home</button>
<button @click="nameTo('detail')">detail</button>
<button @click="nameTo('list')">list</button>
<router-view></router-view>
</div>
</template>
<script>
export default {
created(){
console.log(this.$router)
},
methods:{
// 通过path跳转
// this.$router 是一个对象来的
// push 是 this.$router 对象里面的一个方法
// 或者字符串,如果你传递字符串的话,就是这么写
// 前往首页
// pathToHome(){
// this.$router.push('/'){
// path:'/'
// })
// },
// // 第一种方式
// pathTo(path) {
// this.$router.push({
// path: path
// })
// },
// 通过name跳转
// nameTo(name) {
// this.$router.push({
// name: name
// })
// },
// 第二种方式
//this. route获取当前路由信息
pathToHome(id){
// console.log(1)
// console.log(this.$route)
// if (this.$route.path == '/')
// {
// return;
// }
if(this.$route.name==='home') return false
this.$router.push({
name:'home',
query:{
id:'1',
age:'18'
}
})
},
pathToDetail(){
// console.log(2)
if (this.$route.name == 'detail') return false
this.$router.push({
name:'detail',
query:{
id:'2'
}
})
},
pathToList(){
if (this.$route.name == 'list') return false
// console.log(3)
this.$router.push({
name:'list',
query:{
id:'3'
}
})
},
replaceDetail(){
if(this.$route.name==='detail') return false
this.$router.replace({
path:'/detail'
})
},
back (){
this.$router.back()
}
}
}
</script>
<style scoped>
button{
margin:5px;
}
.to{
margin:10px;
}
</style>
更多推荐
已为社区贡献7条内容
所有评论(0)