Vue实现页面导航实战

亦凉 2021-07-24 22:36 817阅读 0赞

目录

一 使用技术栈

二 创建项目

三 准备资源文件

四 安装axios

五 代码

六 测试

七 源码参考

一 使用技术栈

1 组件及组件间传值

2 axios实现读取json数据：商品数据源存于json中

3 css相关技术进行布局：布局、间距等样式

4 使用views页面级组件，使用router设置页面

二 创建项目

1 创建项目

  1. F:\vue\proj>vue create proj

2 选择必要组件

  1. ? Check the features needed for your project:
  2. (*) Babel
  3. ( ) TypeScript
  4. ( ) Progressive Web App (PWA) Support
  5. (*) Router
  6. ( ) Vuex
  7. ( ) CSS Pre-processors
  8. >( ) Linter / Formatter
  9. ( ) Unit Testing
  10. ( ) E2E Testing

3 选择history模式

  1. ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y

4 选择使用package.json来记录

  1. ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json

5 选不保存为预制项目

  1. ? Save this as a preset for future projects? (y/N) n

6 开始安装

7 运行

  1. cd proj
  2. npm run serve

三 准备资源文件

1 准备图片

20200822151606910.png

2 准备json文件

bjb.json

  1. [
  2.   {
  3.     "goodName": "联想笔记本",
  4.     "img": "img/bjb/bjb1.jpg"
  5.   },
  6.   {
  7.     "goodName": "联想笔记本",
  8.     "img": "img/bjb/bjb2.jpg"
  9.   },
  10.   {
  11.     "goodName": "联想笔记本",
  12.     "img": "img/bjb/bjb3.jpg"
  13.   },
  14.   {
  15.     "goodName": "联想笔记本",
  16.     "img": "img/bjb/bjb4.jpg"
  17.   },
  18.   {
  19.     "goodName": "联想笔记本",
  20.     "img": "img/bjb/bjb5.jpg"
  21.   },
  22.   {
  23.     "goodName": "联想笔记本",
  24.     "img": "img/bjb/bjb6.jpg"
  25.   },
  26.   {
  27.     "goodName": "联想笔记本",
  28.     "img": "img/bjb/bjb7.jpg"
  29.   },
  30.   {
  31.     "goodName": "联想笔记本",
  32.     "img": "img/bjb/bjb8.jpg"
  33.   },
  34.   {
  35.     "goodName": "联想笔记本",
  36.     "img": "img/bjb/bjb9.jpg"
  37.   },
  38.   {
  39.     "goodName": "联想笔记本",
  40.     "img": "img/bjb/bjb10.jpg"
  41.   }
  42. ]

shouji.json

  1. [
  2.   {
  3.     "goodName": "华为手机",
  4.     "img": "img/shouji/sj1.jpg"
  5.   },
  6.   {
  7.     "goodName": "华为手机",
  8.     "img": "img/shouji/sj2.jpg"
  9.   },
  10.   {
  11.     "goodName": "华为手机",
  12.     "img": "img/shouji/sj3.jpg"
  13.   },
  14.   {
  15.     "goodName": "华为手机",
  16.     "img": "img/shouji/sj4.jpg"
  17.   },
  18.   {
  19.     "goodName": "华为手机",
  20.     "img": "img/shouji/sj5.jpg"
  21.   },
  22.   {
  23.     "goodName": "华为手机",
  24.     "img": "img/shouji/sj6.jpg"
  25.   },
  26.   {
  27.     "goodName": "华为手机",
  28.     "img": "img/shouji/sj7.jpg"
  29.   },
  30.   {
  31.     "goodName": "华为手机",
  32.     "img": "img/shouji/sj8.jpg"
  33.   },
  34.   {
  35.     "goodName": "华为手机",
  36.     "img": "img/shouji/sj9.jpg"
  37.   },
  38.   {
  39.     "goodName": "华为手机",
  40.     "img": "img/shouji/sj10.jpg"
  41.   }
  42. ]

四 安装axios

  1. cnpm i axios -S

五 代码

1 创建首页First.vue

  1. <template>
  2.     <div class="main">
  3.         <div class="left">
  4.             <Left></Left>
  5.         </div>
  6.         <div class="right">
  7.             <div class="top">
  8.                 <img src="img/title.jpg" alt="">
  9.             </div>
  10.             <div class="buttom">
  11.                 <Right></Right>
  12.             </div>
  13.         </div>
  14.     </div>
  15. </template>
  17. <script>
  18.     /* 引用组件*/
  19.     import Left from '../components/Left.vue'
  20.     import Right from '../components/Right.vue'
  21.     export default {
  22.         name: "First",
  23.         /* 页面要用到的组件都放在这里 */
  24.         components: {
  25.             Left,
  26.             Right
  27.         }
  28.     }
  29. </script>
  31. <style scoped>
  32.     * {
  33.         padding: 0;
  34.         margin: 0;
  35.     }
  37.     .left {
  38.         width: 100px;
  39.         float: left;
  40.         margin-right: 10px;
  41.     }
  43.     .right {
  44.         width: 1000px;
  45.         float: left;
  46.         margin-left: 10px;
  47.     }
  49.     .main {
  50.         width: 1200px;
  51.         margin: 20px auto;
  52.     }
  54.     .top img {
  55.         height: 200px;
  56.         width: 1000px;
  57.     }
  59.     .left, .right {
  60.         background-color: #f5f5f5;
  61.         height: 660px
  62.     }
  63. </style>

2 创建路由文件index.js

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3. // 不用系统默认主页，而是自定义主页
  4. // import Home from '../views/Home.vue'
  5. // 引入主页
  6. import First from '../views/First.vue'
  8. Vue.use(VueRouter)
  9.   // 主页路由
  10.   const routes = [
  11.   {
  12.     path: '/',
  13.     component: First
  14.   },
  15.   {
  16.     path: '/about',
  17.     name: 'About',
  18.     // route level code-splitting
  19.     // this generates a separate chunk (about.[hash].js) for this route
  20.     // which is lazy-loaded when the route is visited.
  21.     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  22.   }
  23. ]
  25. const router = new VueRouter({
  26.   mode: 'history',
  27.   base: process.env.BASE_URL,
  28.   routes
  29. })
  31. export default router

3 App.vue

  1. <template>
  2.   <div id="app">
  3.     <router-view/>
  4.   </div>
  5. </template>
  7. <style>
  8. #app {
  9.   font-family: Avenir, Helvetica, Arial, sans-serif;
  10.   -webkit-font-smoothing: antialiased;
  11.   -moz-osx-font-smoothing: grayscale;
  12.   text-align: center;
  13.   color: #2c3e50;
  14. }
  16. #nav {
  17.   padding: 30px;
  18. }
  20. #nav a {
  21.   font-weight: bold;
  22.   color: #2c3e50;
  23. }
  25. #nav a.router-link-exact-active {
  26.   color: #42b983;
  27. }
  28. </style>

4 左边导航组件left.vue

  1. <template>
  2.     <div>
  3.         <div class="title">热门推荐</div>
  4.         <ul class="menu">
  5.             <li @click="menu1">笔记本电脑</li>
  6.             <li @click="menu2">手机</li>
  7.             <li @click="menu3">服饰</li>
  8.             <li @click="menu4">手表</li>
  9.             <li>书籍</li>
  10.             <li>玩具</li>
  11.             <li>小家电</li>
  12.             <li>学习用品</li>
  13.             <li>办公用品</li>
  14.             <li>旅游必备</li>
  15.             <li>游戏卡通</li>
  16.         </ul>
  17.     </div>
  18. </template>
  20. <script>
  21.     // 引入事件总线
  22.     import Msg from './Msg.js'
  25.     export default {
  26.         name: "left",
  27.         methods: {
  28.             menu1: function () {
  29.                 // 通过数据总线传值给兄弟节点
  30.                 Msg.$emit("val", "1");
  31.             },
  32.             menu2: function () {
  33.                 // 通过数据总线传值给兄弟节点
  34.                 Msg.$emit("val", "2");
  35.             },
  36.             menu3: function () {
  37.                 // 通过数据总线传值给兄弟节点
  38.                 Msg.$emit("val", "3");
  39.             },
  40.             menu4: function () {
  41.                 // 通过数据总线传值给兄弟节点
  42.                 Msg.$emit("val", "4");
  43.             }
  44.         }
  45.     }
  46. </script>
  48. <style scoped>
  49.     .title {
  50.         width: 100px;
  51.         color: red;
  52.     }
  54.     .menu {
  55.         padding-inline-start: 0px;
  56.     }
  58.     .menu li {
  59.         list-style: none;
  60.         height: 50px;
  61.         margin-bottom: 2px;
  62.         background-color: white;
  63.         line-height: 50px;
  64.         /* 改变鼠标指针为手形形状 */
  65.         cursor: pointer;
  66.     }
  67. </style>

5 事件总线Msg.js，用于同级组件传值

  1. // 事件总线文件是js文件，不是vue文件
  2. import  Vue from 'vue'
  3. export default  new Vue

6 右边内容组件Right.vue

  1. <template>
  2.     <div>
  3.         <!-- 通过kk的值控制显示的内容 -->
  4.         <div v-if="kk==1">
  5.             <!-- 这里是属性绑定，也可以用 v-bind ,实现了组件的传值-->
  6.             <GoodList :goodId="1"></GoodList>
  7.         </div>
  8.         <div v-else-if="kk==2">
  9.             <GoodList v-bind:goodId="2"></GoodList>
  10.         </div>
  11.         <div v-else-if="kk==3">
  12.             33333333333
  13.         </div>
  14.         <div v-else-if="kk==4">
  15.             4444444444
  16.         </div>
  17.         <div v-else>
  18.             <GoodList v-bind:goodId="1"></GoodList>
  19.         </div>
  20.     </div>
  21. </template>
  23. <script>
  24.     // 引入事件总线
  25.     import Msg from './Msg.js'
  26.     // 引入自定义组件
  27.     import GoodList from "./GoodList"
  28.     // 下面这种写法也可以
  29.     // import GoodList from "./GoodList.vue"
  31.     export default {
  32.         name: "Right",
  33.         data() {
  34.             return {
  35.                 kk: 0
  36.             }
  37.         },
  38.         mounted() {
  39.             // _this 是 this 的副本，不能用this，因为页面中不同的this含义不同，所以要用一个副本存储
  40.             var _this = this;
  41.             // 此处的 val 接收 left.vue 中兄弟节点传过来的值，然后 val 的值再传给m
  42.             Msg.$on('val', function (m) {
  43.                 _this.kk = m;
  44.                 // 这里不能用 this.kk ，因为它表示的是on里面的内容，这就是前面为什么用_this的原因
  45.                 // this.kk = m //错误
  46.             })
  47.         },
  48.         // 组件注册放在这里
  49.         components: {
  50.             GoodList
  51.         }
  52.     }
  53. </script>
  55. <style scoped>
  57. </style>

7 main.js

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. // 引入 axios
  5. import axios from 'axios'
  6. // 全局注册 axios
  7. Vue.prototype.$http = axios
  8. Vue.config.productionTip = false
  10. new Vue({
  11.     router,
  12.     render: h => h(App)
  13. }).$mount('#app')

8 商品列表组件GoodList.vue

  1. <template>
  2.     <div name="show">
  3.         <ul class="goodList">
  4.             <li v-for="goods in list">
  5.                 <!-- v-bind 是属性绑定，这里绑定的是src属性-->
  6.                 <img v-bind:src="goods.img">
  7.                 <p>{
  8.    {goods.goodName}}</p>
  9.             </li>
  10.         </ul>
  11.     </div>
  12. </template>
  14. <script>
  15.     export default {
  16.         name: "show",
  17.         data() {
  18.             // 初始化代码
  19.             var obj = this;
  20.             var url;
  21.             if (obj.goodId == 1) {
  22.                 url = "json/bjb.json"
  23.             } else if (obj.goodId == 2) {
  24.                 url = "json/shouji.json"
  25.             }
  26.             this.$http.get(url).then(function (res) {
  27.                 obj.list = res.data;
  28.             })
  29.             return {
  30.                 list: []
  31.             }
  32.         },
  33.         props: {
  34.             // 调用组件时定义了goodId
  35.             goodId: Number
  36.         },
  37.         /* 监听传递的参数 */
  38.         watch: {
  39.             goodId() {
  40.                 var obj = this;
  41.                 var url = "";
  42.                 if (obj.goodId == 1) {
  43.                     url = "json/bjb.json"
  44.                 } else if (obj.goodId == 2) {
  45.                     url = "json/shouji.json"
  46.                 }
  47.                 this.$http.get(url).then(function (res) {
  48.                     obj.list = res.data;
  49.                 })
  50.                 return {
  51.                     list: []
  52.                 }
  53.             }
  54.         }
  55.     }
  56. </script>
  58. <style scoped>
  59.     .goodList li {
  60.         width: 190px;
  61.         height: 190px;
  62.         list-style: none;
  63.         float: left;
  64.         font-size: 9px;
  65.         color: red;
  66.         margin-bottom: 30px;
  67.     }
  69.     .goodList img {
  70.         width: 180px;
  71.         height: 180px;
  72.     }
  73. </style>

六 测试

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70

七 源码参考

https://gitee.com/cakin24/prog

发表评论

表情：
评论列表 （有 0 条评论，817人围观）

还没有评论，来说两句吧...

相关阅读

    相关 mui实现底部导航栏页面切换

    1 问题描述 mui是一款最接近原生的框架，对于会使用的人来说十分的便捷易操作，但对于像笔者这样刚入门的小白可是十分的陌生和走了太多的弯路。 对于那些不懂的前端的人，或

    灰太狼灰太狼/ 0 赞/ 838 阅读