用户登录

访问一下应用的首页 .. 这里显示的东西,是 pages 里面的 index.vue .. 打开这个文件 .. 修改一下它的视图 .. 去掉里面所有的东西 .. 一个 div .. container .. 包装一个 h1.display-1 ... 标题文字是 ninghao ..

现在应用的首页上会显示一个 ninghao .. 把这个文字放在一个链接里面 .. 先用一下 a 标签 .. href 是链接的地址 .. 地址是 /posts ..

点一下页面上这个 ninghao ,打开的是 /posts 这个页面 .. 注意打开这个页面的时候浏览器会刷新 .. 返回到首页 .. 打开开发者工具 .. Network ... 再试一下 ..

防止刷新页面,我们可以使用 nuxt-link 这个组件 ..

把这个 a 标签,换成 nuxt-link .. href 属性,换成 to .. 链接的地址仍然是 /posts ..

再试一下 .. 按一下页面上的 ninghao ,这次没有刷新页面,直接就显示了 /posts 页面上的内容 .. 不过你会发现这个页面的标题现在会居中在页面上 .. 刷新一下页面 ... 标题又会回到原来的位置上了 ..

这个是因为首页上的样式,影响到了这个 posts 页面的样式 ..

在这个首页组件上 . 找到 style .. 可以给它添加一个 scoped .. 意思是这里的样式只在当前这个组件上有效 ..

回到浏览器 .. 刷新一下页面 .. 点一下 ninghao ,会打开 posts 页面 .. 这次打开的时候, 首页上的样式就不会影响到这个页面了 ..

路由链接:nuxt-link《 Nuxt.js:路由与视图 》

统计

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

社会化网络

关于

微信订阅号

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