前进、后退
在vue-router中提供了类似浏览器的前进后退功能。
具体方法是引入：
选项式
使用$router.forward() 与$router.back()
<template>
<div>
<button @click="handelBack">回退</button>
<button @click="handelForward">前进</button>
</div>
<!-- 路由容器 -->
<!-- <User/> -->
<!-- <TabBar /> -->
<router-view></router-view>
</template>
<script>
export default {
methods:{
handelBack() {
// router.go(-1)
this.$router.back()
},
handelForward(){
// router.go(1)
this.$router.forward()
}
}
}
</script >组件式
引入import { useRouter } from 'vue-router'
<template>
<div>
<button @click="handelBack">回退</button>
<button @click="handelForward">前进</button>
</div>
<!-- 路由容器 -->
<!-- <User/> -->
<!-- <TabBar /> -->
<router-view></router-view>
</template>
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter()
const handelBack = ()=>{
// router.go(-1)
router.back()
}
const handelForward = ()=>{
// router.go(1)
router.forward()
}
</script>同组件跳转刷新
在同组件进行路由跳转时，会出现因为组件没有重新加载导致mounted未重新调用，导致页面数据不刷新的情况，此时可以借助computed进行处理
示例如下：
当前url为/user/detail/1.在此页面中添加一个点击到/user/detail/2的按钮，但是点击后，参数虽然改变但是由于组件没有更新，导致onMounted没有执行，所以页面中数据并非正确数据
<template>
<h2>detail</h2>
<div>当前参数为 {{ $route.params.userid }}</div>
<div>id :{{ data['id'] }}</div>
<div>age : {{ data['age'] }}</div>
<div>name : {{ data['name'] }}</div>
<div @click="handleJump">
跳转到 id 2
</div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()
import axios from 'axios'
const data = ref([])
const handleJump = ()=>{
router.push('/user/detail/2')
}
onMounted(
async () => {
console.log(route.params.userid)
const res = await axios.get('http://127.0.0.1:5000/api/test/jsontest/Users/' + route.params.userid)
data.value = res.data.msg[0]
}
)
</script>
为了解决类似问题，可以通过watch来解决
<template>
<h2>detail</h2>
<div>当前参数为 {{ $route.params.userid }}</div>
<div>id :{{ data['id'] }}</div>
<div>age : {{ data['age'] }}</div>
<div>name : {{ data['name'] }}</div>
<div @click="handleJump">
跳转到 id 2
</div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()
import axios from 'axios'
const data = ref([])
const handleJump = () => {
router.push('/user/detail/2')
}
onMounted(async () => {
await fetchData();
});
watch(() => route.params.userid, async (newUserId) => {
await fetchData(newUserId);
});
const fetchData = async (userid = route.params.userid) => {
const response = await axios.get(`http://127.0.0.1:5000/api/test/jsontest/Users/${userid}`);
data.value = response.data.msg[0];
};
</script>在这段代码中由于获取数据的函数使用了两次（onMounted watch）所以封装了一下。
在VUE中，watch()需要监听一个响应式数据或计算属性，以便能够在数据变化时执行某些操作。因此，通过使用计算属性函数来监听 route.params.userid，你可以确保在路由参数发生变化时，watch 会得到通知，并执行相应的回调函数。
如果直接将 route.params.userid 作为第一个参数传递给 watch，而不使用计算属性函数，那么 watch 只会在初始渲染时监听这个值的变化，而不会在路由参数发生变化时重新触发。
所以watch的第一个参数写成了() => route.params.userid
