编程式路由编程

我们知道通过 RouterLink 可以实现路由的跳转, 但是如果有一个需求, 5秒后跳转到某一个路由,应该如何实现呢?
复习一下 RouterLink

        <RouterLink 
          replace
          :to="{
            name:'use',
            query:{
              id:news.id,
              title:news.title,
              content:news.content
            }
          }"
        >
          {{news.title}}
        </RouterLink>

浏览器的历史记录有两种写入方式:分别为push和replace:
push是追加历史记录(默认值)。
replace是替换当前记录。

来到今天的主题——编程式路由

import {useRoute,useRouter} from 'vue-router'
const router = useRouter()
console.log(router.push)
router.push({ name: 'home', params: { id: '123' } })
router.push({ path: '/home', query: { id: '123' } })
// 同理
router.replace({ path: '/login' })
### 实现编程式路由导航 在 React 中,`react-router-dom` 提供了多种方法来实现编程式路由导航。通过 `useNavigate` 钩子可以方便地控制页面之间的跳转。 #### 使用 `useNavigate` 进行编程式导航 为了使用编程式导航功能,在函数组件中引入并使用 `useNavigate` 钩子: ```javascript import { useNavigate } from 'react-router-dom'; function LoginPage() { let navigate = useNavigate(); function handleLoginClick() { // 执行登录逻辑... // 登录成功后重定向至首页 navigate('/home', { replace: true }); } return ( <button onClick={handleLoginClick}> 登录 </button> ); } ``` 上述代码展示了如何利用 `navigate()` 方法完成从登录页到主页的跳转操作[^2]。 参数 `{replace: true}` 表示这次导航会替换掉当前的历史条目而不是创建新的历史条目。 对于类组件而言,则可以通过 `withRouter` 或者自定义高阶组件的方式使组件获得访问路由器的能力,并进而调用其提供的 `history.push()` 来达到相同的效果[^3]。 另外值得注意的是,除了简单的路径字符串外,还可以传递对象作为第一个参数给 `navigate()` 函数,从而携带查询参数或状态信息等附加数据: ```javascript // 跳转的同时附带query参数 navigate({ pathname: '/search', search: '?q=react' }); // 或者带上location state navigate('/profile', { state: { user: 'mike' } }); ``` 这种灵活性使得开发者可以根据实际需求灵活调整应用的行为模式[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值