vue项目实战(第二回)

时间 2020-08-22

标签 vue 项目实战二回繁體版

原文原文链接

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

项目中路由的配置

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

1.项目的结构分析

index.html的内容以下：vue

<!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做为项目的入口，内容以下：webpack

// 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做为项目的根组件，内容以下（关于根组件的更多内容请参考此连接）：web

<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做为管理项目的路由，内容以下：vue-router

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/#/时咱们看到页面的结构以下：
segmentfault

2.项目路由配置

咱们先看下须要的实际效果

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

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

<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配置以下：vue-resource

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
        }
      ]
    }
  ]
})

子路由以下：ui

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