vue项目实战(第二回)_Vue.js

上一篇: 10分钟学会vue滚动行为下一篇:vue中如何使用i18n实现国际化

vue项目实战(第二回)

发布时间：2019-05-29 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了vue项目实战(第二回)，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

项目完整地址：
系列文章一：https://segmentfault.com/a/11...
系列文章二：https://segmentfault.com/a/11...

项目中路由的配置

路由这一块儿一直是我比较头疼的问题，在做angularJs项目的时候由于页面过多，在做路由配置及跳转的时候导致出现了问题，及时当时已经解决了，还是有点儿稀里糊涂，现在开始做vue项目，我想趁着这个机会好好把路由捋一捋，如果有相应疏漏还烦请批评指正，这里谢谢各位同学

1.项目的结构分析

vue项目实战(第二回)

index.html的内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue_program</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

mian.js作为项目的入口，内容如下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'

Vue.use(VueResource)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app', //把vue实例挂载到index.html页面里面的<div id="app"></div>并覆盖掉此html元素
  router,
  template: '<App/>',
  components: { App }
})

vue实例中template: '<App/>'是什么意思，可以参考此链接
App.vue作为项目的根组件，内容如下（关于根组件的更多内容请参考此链接）：

<template>
  <div id="app">
    <div class="app-head">
      <div class="app-head-inner">
          <img src="./assets/1.jpg">
          <div class="head-nav">
            <ul class="nav-list">
              <li>登陆</li>
              <li class="nav-pile">|</li>
              <li>注册</li>
              <li class="nav-pile">|</li>
              <li>关于</li>
            </ul>
          </div>
        </div>
    </div>
    <div class="app-content">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
    <div class="app-footer">
      <div class="app-foot">
        <p>@2017 宗强 编写</p>
      </div>
    </div>
  </div>
</template>

router.js作为管理项目的路由，内容如下：

import Vue from 'vue'
import Router from 'vue-router'
import homepage from '../view/homepage/index.vue'
import detail from '../view/detail/index.vue'

Vue.use(Router)

export default new Router({
  // mode: 'history',
  routes: [
    {
      path: '', //http://localhost:8080/#/
      name: 'homepage',
      component: homepage
    },
    {
      path: '/detail', //http://localhost:8080/#/detail
      name: 'detail',
      component: detail
    }
  ]
})

当路由为http://localhost:8080/#/时我们看到页面的结构如下：
图片描述

2.项目路由配置

我们先看下需要的实际效果

vue项目实战(第二回)

我们来看下这个过程中发生了什么当我们点击立即购买时跳转了到了http://localhost:8080/#/detail页面，这个页面相当于另外一个layout根组件，它长什么样子呢？

vue项目实战(第二回)

这个页面的内容是什么呢？view/detail/index.vue

<template>
  <div class="detail-wrap">
    <div class="detail-left">
      <div class="product-board">
        <img :src="productIcon">
        <ul>
          <router-link v-for="item in products" :to="{ path: item.path }" tag="li" active-class="active" :key="item.id">
            {{ item.name }}
          </router-link>
        </ul>
      </div>
    </div>
    <div class="detail-right">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      products: [
        {
          name: '数据统计',
          path: 'count',
          icon: require('../../assets/images/1.png'),
          active: false
        },
        {
          name: '数据预测',
          path: 'forecast',
          active: false
        },
        {
          name: '流量分析',
          path: 'analysis',
          active: false
        },
        {
          name: '广告发布',
          path: 'publish',
          active: false
        }
      ],
      imgMap: {
        '/detail/count': require('../../assets/images/1.png'),
        '/detail/forecast': require('../../assets/images/2.png'),
        '/detail/analysis': require('../../assets/images/3.png'),
        '/detail/publish': require('../../assets/images/4.png')
      }
    }
  },
  computed: {
    productIcon () {
      return this.imgMap[this.$route.path]
    }
  }
}
</script>

router/index.js配置如下：

import Vue from 'vue'
import Router from 'vue-router'
import homepage from '../view/homepage/index.vue'
import detail from '../view/detail/index.vue'
import DetailAnaPage from './../view/detail/analysis.vue'
import DetailCouPage from './../view/detail/count.vue'
import DetailForPage from './../view/detail/forecast.vue'
import DetailPubPage from './../view/detail/publish.vue'

Vue.use(Router)

export default new Router({
  // mode: 'history',
  routes: [
    {
      path: '',
      name: 'homepage',
      component: homepage
    },
    {
      path: '/detail',
      component: detail,
      redirect: '/detail/analysis',
      children: [
        {
          path: 'analysis',
          component: DetailAnaPage
        },
        {
          path: 'count',
          component: DetailCouPage
        },
        {
          path: 'forecast',
          component: DetailForPage
        },
        {
          path: 'publish',
          component: DetailPubPage
        }
      ]
    }
  ]
})

子路由如下：

http://localhost:8080/#/detail/count
http://localhost:8080/#/detail/forecast
http://localhost:8080/#/detail/analysis
http://localhost:8080/#/detail/publish

图片描述

脚本宝典总结

以上是脚本宝典为你收集整理的vue项目实战(第二回)全部内容，希望文章能够帮你解决vue项目实战(第二回)所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：Vue

上一篇: 10分钟学会vue滚动行为下一篇:vue中如何使用i18n实现国际化

猜你在找的Vue.js相关文章

Vue 3.0 风格指南 2024-10-19
Vue-SuperSlide(SuperSlide component for Vue) 2019-05-07
基于vue2.0的weex实践（前端视角） 2019-05-07
手把手教你写 Vue UI 组件库@vue2.0 2019-05-07
解决vue报错Failed to mount component 2019-05-07
Vue学习笔记之vue-cli项目搭建及解析 2019-05-07
Vue.js—单元测试 2019-05-07
vue2.0脚手架的安装和项目搭建 2019-05-07
Vue经典开源项目汇总demo实例github下载教程 2018-12-04
使用Vue.js构建Wordpress Gutenberg块 2018-11-17

全站导航更多

最新Vue.js教程

热门Vue.js教程