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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。