用户登录

在 Nuxt 应用的组件里,使用 useRouter 可以获取到应用的路由器实例,这个实例上有一些方法可以控制路由,比如添加删除路由,前进、后退等等。

在项目里打开 app/home 这个组件,在组件里添加一组 script 标签,上面加上 setup,然后在组件的脚本里面声明一个 router,用 useRouter 得到应用的路由器实例。

在组件的模板里添加一组 div,里面的文字是 关于我们 → ,在这个 div 元素上绑定 click 事件,用一下 router 路由器实例上面提供的 push 这个方法,往历史堆里添加一条新的记录,提供一个对象,设置一下 path 路径,值是 /about。

在浏览器测试一下,点击首页上的 关于我们,会使用路由器实例上的 push 方法,打开 /about 这个地址。

回到项目,再打开 about 组件,在组件的视图里添加一组 div,文字是 ← 回到首页,点击这个元素可以回到应用的首页,这里我们用一下 Nuxt 提供的 navigateTo 这个路由器帮手方法,它也可以帮我们打开新的地址,提供一个对象,设置一下 path 路径,值是 / ,表示应用的根。

在内容页面,点击 关于我们,会使用 navigateTo 这个帮手方法,打开应用的首页。

在 Nuxt 应用里以编程方式跳转导航链接(useRouter、navigateTo)《 Nuxt.js:应用路由 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点