vue項目實戰(第二回)

kidsamong 發布于2019-08-21 18:23 / 2772人閱讀

摘要：項目完整地址系列文章一系列文章二項目中路由的配置路由這一塊兒一直是我比較頭疼的問題，在做項目的時候由于頁面過多，在做路由配置及跳轉的時候導致出現了問題，及時當時已經解決了，還是有點兒稀里糊涂，現在開始做項目，我想趁著這個機會好好把路由捋一捋

項目完整地址：

系列文章一：https://segmentfault.com/a/11...

系列文章二：https://segmentfault.com/a/11...

項目中路由的配置

路由這一塊兒一直是我比較頭疼的問題，在做angularJs項目的時候由于頁面過多，在做路由配置及跳轉的時候導致出現了問題，及時當時已經解決了，還是有點兒稀里糊涂，現在開始做vue項目，我想趁著這個機會好好把路由捋一捋，如果有相應疏漏還煩請批評指正，這里謝謝各位同學

1.項目的結構分析

index.html的內容如下：



  
    
    
    vue_program

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頁面里面的并覆蓋掉此html元素
  router,
  template: "",
  components: { App }
})

vue實例中template: ""是什么意思，可以參考此鏈接
App.vue作為項目的根組件，內容如下（關于根組件的更多內容請參考此鏈接）：

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

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

GPU云服務器云服務器 hadoop實戰第二版項目實戰 python實戰項目 python項目實戰

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90412.html

【EASYDOM系列教程】索引

摘要：系列教程是一套免費開源，任何人都可以免費學習分享，甚至可以進行修改。本文是這套系列教程的索引也就是目錄第一回介紹在最開始，我們先來了解是什么的作用，以及瀏覽器的支持是怎么樣的。《EASYDOM》系列教程是一套免費、開源，任何人都可以免費學習、分享，甚至可以進行修改。但需要注明作者及來源，并且不能用于商業。本文是這套系列教程的索引（也就是目錄）: 第一回 DOM 介紹在最開始，我...

yanwei 2019-08-21 11:51 評論0 收藏0
學習不一樣的vue實戰(1): 環境搭建

摘要：淘寶鏡像是一個完整鏡像，你可以用此代替官方版本只讀，同步頻率目前為分鐘一次以保證盡量與官方服務同步。全功能的，包括熱加載，靜態檢測，單元測試一個簡易的，以便于快速開始。 showImg(https://segmentfault.com/img/bVOBkJ?w=900&h=500); 首先首發博客: 我的博客項目源碼: 源碼項目預覽: 預覽因為個人的喜好和工作的需要,一直...

BoYang 2019-08-29 12:41 評論0 收藏0
學習不一樣的vue實戰(1): 環境搭建

摘要：淘寶鏡像是一個完整鏡像，你可以用此代替官方版本只讀，同步頻率目前為分鐘一次以保證盡量與官方服務同步。全功能的，包括熱加載，靜態檢測，單元測試一個簡易的，以便于快速開始。 showImg(https://segmentfault.com/img/bVOBkJ?w=900&h=500); 首先首發博客: 我的博客項目源碼: 源碼項目預覽: 預覽因為個人的喜好和工作的需要,一直...

Atom 2019-08-20 16:59 評論0 收藏0
學習不一樣的vue實戰(1): 環境搭建

摘要：淘寶鏡像是一個完整鏡像，你可以用此代替官方版本只讀，同步頻率目前為分鐘一次以保證盡量與官方服務同步。全功能的，包括熱加載，靜態檢測，單元測試一個簡易的，以便于快速開始。 showImg(https://segmentfault.com/img/bVOBkJ?w=900&h=500); 首先首發博客: 我的博客項目源碼: 源碼項目預覽: 預覽因為個人的喜好和工作的需要,一直...

OnlyLing 2019-08-01 16:56 評論0 收藏0