vue项目实战(第二回)

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

项目中路由的配置

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

1.项目的结构分析

图片描述

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.项目路由配置

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

这个页面的内容是什么呢？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项目实战(第二回)

项目中路由的配置

1.项目的结构分析

2.项目路由配置

喔喔牛在路上

引用和评论

面试题

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号