在 Nuxt 应用的组件里,使用 useRouter 可以获取到应用的路由器实例,这个实例上有一些方法可以控制路由,比如添加删除路由,前进、后退等等。
在项目里打开 app/home 这个组件,在组件里添加一组 script 标签,上面加上 setup,然后在组件的脚本里面声明一个 router,用 useRouter 得到应用的路由器实例。
在组件的模板里添加一组 div,里面的文字是 关于我们 → ,在这个 div 元素上绑定 click 事件,用一下 router 路由器实例上面提供的 push 这个方法,往历史堆里添加一条新的记录,提供一个对象,设置一下 path 路径,值是 /about。
在浏览器测试一下,点击首页上的 关于我们,会使用路由器实例上的 push 方法,打开 /about 这个地址。
回到项目,再打开 about 组件,在组件的视图里添加一组 div,文字是 ← 回到首页,点击这个元素可以回到应用的首页,这里我们用一下 Nuxt 提供的 navigateTo 这个路由器帮手方法,它也可以帮我们打开新的地址,提供一个对象,设置一下 path 路径,值是 / ,表示应用的根。
在内容页面,点击 关于我们,会使用 navigateTo 这个帮手方法,打开应用的首页。