vue项目实战(第二回)

kidsamong 发布于2019-08-21 18:23 / 2681人阅读

摘要：项目完整地址系列文章一系列文章二项目中路由的配置路由这一块儿一直是我比较头疼的问题，在做项目的时候由于页面过多，在做路由配置及跳转的时候导致出现了问题，及时当时已经解决了，还是有点儿稀里糊涂，现在开始做项目，我想趁着这个机会好好把路由捋一捋

项目完整地址：

系列文章一：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

云服务器服务器托管 hadoop实战第二版项目实战 python实战项目 python项目实战

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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