国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue項(xiàng)目實(shí)戰(zhàn)(第二回)

kidsamong / 2771人閱讀

摘要：項(xiàng)目完整地址系列文章一系列文章二項(xiàng)目中路由的配置路由這一塊兒一直是我比較頭疼的問(wèn)題，在做項(xiàng)目的時(shí)候由于頁(yè)面過(guò)多，在做路由配置及跳轉(zhuǎn)的時(shí)候?qū)е鲁霈F(xiàn)了問(wèn)題，及時(shí)當(dāng)時(shí)已經(jīng)解決了，還是有點(diǎn)兒稀里糊涂，現(xiàn)在開始做項(xiàng)目，我想趁著這個(gè)機(jī)會(huì)好好把路由捋一捋

項(xiàng)目完整地址：

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

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

項(xiàng)目中路由的配置

路由這一塊兒一直是我比較頭疼的問(wèn)題，在做angularJs項(xiàng)目的時(shí)候由于頁(yè)面過(guò)多，在做路由配置及跳轉(zhuǎn)的時(shí)候?qū)е鲁霈F(xiàn)了問(wèn)題，及時(shí)當(dāng)時(shí)已經(jīng)解決了，還是有點(diǎn)兒稀里糊涂，現(xiàn)在開始做vue項(xiàng)目，我想趁著這個(gè)機(jī)會(huì)好好把路由捋一捋，如果有相應(yīng)疏漏還煩請(qǐng)批評(píng)指正，這里謝謝各位同學(xué)

1.項(xiàng)目的結(jié)構(gòu)分析

index.html的內(nèi)容如下：



  
    
    
    vue_program

mian.js作為項(xiàng)目的入口，內(nèi)容如下：

// 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實(shí)例掛載到index.html頁(yè)面里面的
并覆蓋掉此html元素
  router,
  template: "",
  components: { App }
})

vue實(shí)例中template: ""是什么意思，可以參考此鏈接
App.vue作為項(xiàng)目的根組件，內(nèi)容如下（關(guān)于根組件的更多內(nèi)容請(qǐng)參考此鏈接）：

router.js作為管理項(xiàng)目的路由，內(nèi)容如下：

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

當(dāng)路由為http://localhost:8080/#/時(shí)我們看到頁(yè)面的結(jié)構(gòu)如下：

2.項(xiàng)目路由配置

我們先看下需要的實(shí)際效果

我們來(lái)看下這個(gè)過(guò)程中發(fā)生了什么當(dāng)我們點(diǎn)擊立即購(gòu)買時(shí)跳轉(zhuǎn)了到了http://localhost:8080/#/detail頁(yè)面，這個(gè)頁(yè)面相當(dāng)于另外一個(gè)layout根組件，它長(zhǎng)什么樣子呢？

這個(gè)頁(yè)面的內(nèi)容是什么呢？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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/90412.html

相關(guān)文章

  • 【EASYDOM系列教程】索引

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

    yanwei 評(píng)論0 收藏0

  • 學(xué)習(xí)不一樣的vue實(shí)戰(zhàn)(1): 環(huán)境搭建

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

    BoYang 評(píng)論0 收藏0

  • 學(xué)習(xí)不一樣的vue實(shí)戰(zhàn)(1): 環(huán)境搭建

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

    Atom 評(píng)論0 收藏0

  • 學(xué)習(xí)不一樣的vue實(shí)戰(zhàn)(1): 環(huán)境搭建

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

    OnlyLing 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<