Vue学习第31天——编程式路由导航5种方法详解及案例练习(与声明式路由导航对比)
2023-09-11 14:21:26 时间
一、编程式路由导航
1、概念
除了使用 <router-link>
创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。
2、理解
不借助 <router-link>
实现路由跳转
3、用法
在vue组件中,可以通过 $router
访问路由实例,因此可以调用this.$router.xxx
方法完成路由跳转
pushDetail(cat){
// 字符串路径
$router.push('/cats/detail')
// 带有路径的对象
$router.push({ path: '/cats/detail' })
// 命名的路由,并加上参数,结果是/cats/detail/憨瓜
$router.push({ name: 'xiangqing', params: { name: '憨瓜' } })
// 带查询参数,结果是 /cats/detail?name=憨瓜
$router.push({ path: '/cats/detail', query: { name: '憨瓜' } })
}
二、编程式路由导航的5种方法
1、push
this.$router.push({...})
可以回退到上一次记录
this.$router.push({
path:'/cats/detail',
query:{
name:cat.name,
age:cat.age,
}
})
2、replace
this.$router.replace({...})
替换掉了历史记录,不可以回退到上一次记录
this.$router.replace({
path:'/cats/detail',
query:{
name:cat.name,
age:cat.age,
}
})
3、forward
this.$router.forward()
前进,前进到下一次的历史记录(相当于浏览器的→
按钮)
this.$router.forward()
4、back
this.$router.back()
后退,后退到上一次的历史记录(相当于浏览器的←
按钮)
this.$router.back()
5、go
this.$router.go()
可以前进也可后退(携带参数,正数为前进,负数为后退)
this.$router.go(2) //前进两步
this.$router.go(-3) //后退3步
三、案例练习
需求:练习编程式导航的5种方法
App.vue
<template>
<div id="app">
<button @click="forwardBtn">前进forward</button> 
<button @click="backBtn">后退back</button> 
<button @click="goBtn">测试go前进两步</button>
<h3>喵喵学院成员信息</h3>
<router-link to="/cats" push>猫咪信息展示</router-link> 
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
methods:{
//前进
forwardBtn(){
this.$router.forward()
},
//后退
backBtn(){
this.$router.back()
},
//正数为前进,负数为后退
goBtn(){
this.$router.go(2)
}
}
}
</script>
<style>
a {
text-decoration: none;
}
</style>
router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
import Cats from "../pages/Cats";
import Detail from "../pages/Detail"
export default new VueRouter({
routes:[
{
path:'/cats',
component:Cats,
children:[
{
path:'detail',
component:Detail,
}
]
},
]
})
Cats.vue
<template>
<div>
<ul>
<li v-for="(cat,index) in cats" :key="index">
<p>喵喵名:{{cat.name}}
<button @click="pushDetail(cat)">push导航</button>
</p>
</li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:"Cats",
data(){
return {
cats:[{
name:"憨瓜",
age:"3岁",
sex:"公"
},{
name:"波妞",
age:"3岁",
sex:"母",
}]
}
},
methods:{
//编程式路由导航push
pushDetail(cat){
this.$router.push({
path:'/cats/detail',
query:{
name:cat.name,
age:cat.age,
sex:cat.sex
}
})
}
}
}
</script>
Detail.vue
<template>
<div>
<p>姓名:{{$route.query.name}},年龄:{{$route.query.age}},性别:{{$route.query.sex}},已绝育,育苗已打</p>
</div>
</template>
<script>
export default {
name:"Detail",
}
</script>
运行结果
四、编程式路由导航与声明式路由导航对比
1、声明式路由导航(router-link)会被转化为<a>标签
,编程式路由导航可以实现随意标签,并且可以设置路由跳转条件
2、声明式导航写在template内,编程式路由导航一般写在methods内
3、导航到不同的位置
声明式 | 编程式 |
---|---|
<router-link :to="..."> | $router.push(...) |
4、替换当前位置
声明式 | 编程式 |
---|---|
<router-link :to="..." replace> | $router.replace(...) |
相关文章
- (尚033)Vue_案例_slot(组件间的通信4:slot)
- (尚028)Vue_案例_交互删除
- vue - for 遍历对象和遍历对象数组
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- 关于Vue的两种API写法——选项API和组合API
- Vue项目--防抖与节流
- (30)打鸡儿教你Vue.js
- Vue项目中Pinia状态管理工具的使用
- VUE input focus事件阻止冒泡 阻止父元素事件触发
- Vue知识点总结(24)——使用VueCli创建一个项目(超级详细)
- vue实战入门进阶篇九:vue+elementui实现网站后台-系统设置界面实现
- Vue中的MVVM
- Vue项目部署后,刷新提示404
- Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理
- Vue学习第33天——路由守卫(导航守卫)超详解讲解及使用场景、案例练习
- Vue学习第27天——路由vue-router的详解及案例练习
- Vue经典实例之数据搜索、数据过滤(简单易懂)