1. 使用<router-link>
组件
<router-link>
是Vue Router提供的组件,用于实现路由的声明式导航。它默认渲染成一个<a>
标签,但你可以通过tag
属性改变渲染的HTML标签。
使用编程式导航
在某些情况下,你可能需要使用JavaScript来导航到不同的URL,而不是通过点击链接。Vue Router提供了router.push
、router.replace
和router.go
等方法来实现编程式导航。
router.push(location, onComplete?, onAbort?)
:导航到不同的URL,这个方法会向history栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的URL。-
注意事项
- 在Vue组件内部,你可以通过
this.$router
来访问router实例,从而使用上述的编程式导航方法。 - 当你使用
<router-link>
进行声明式导航时,Vue Router会自动处理点击事件,并更新URL。 - 编程式导航不会触发
<router-link>
的默认行为,即点击链接时不会重新加载页面。 - 在使用
router.push
或router.replace
时,如果目标路由和当前路由相同,并且该路由配置了props
,则组件会重新渲染。
路由跳转:
uni.navigateTo({
url: `/pages/message/message?name=${item.name}&avatar=${item.avatar}`
});
按钮跳转
import { useRouter } from 'vue-router';
const router = useRouter();
//查看
function goEcharts(){
router.push({path:'/hrm/hrm/staff/staff/PersonnelDetails'})
}