Day4给你一个导览列大家说好不好

今天从导览列开始做首先先把 components里的helloword .vue 跟有import helloworld.vue的文字删除
v-main v-app这些tag就是vuetify专门的tag还有很多tag 以及这些tag的用法後面会提到
然後在app.vue里面新增一个router-view(使router能够运作)

在router 里面的index.js修改一下(把home页跟about页import进index.js并且设定名字跟path

再来npm run serve 看一下目前网页画面!
这是首页

这是about页

有发现吗? 在app.vue里面下的html tag (div app.vue div)出现在所有页面
再来目前的跳页方式就是透过直接输入路由(我的about页就是localhost:8081/about)至於为什麽是/about不是 /othername 是因为刚刚我们已经在上面定义我们的路由了所以接下来其他页面也会以同样的形式(千万记得要在app.vue新增router-view 才能实现跳页喔!

再来我先从创建nav bar开始,首先先参考vuetify (前端框架的功能就是很多已经写好的框架直接拿来用就已经足够完善)看有没有适合的tag
https://vuetifyjs.com/zh-Hans/getting-started/installation/
最後找到了一个适合的 v-toolbar tag 效果如下
首页