vue项目实战(第二回)-白红宇

vue项目实战(第二回)

阅读量：7104 次

发布时间：2019-06-28

本文共 3083 字，大约阅读时间需要 10 分钟。

项目完整地址：

系列文章一：

系列文章二：

项目中路由的配置

路由这一块儿一直是我比较头疼的问题，在做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/>'是什么意思，可以参考

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

图片描述

转载地址：http://juuhl.baihongyu.com/

你可能感兴趣的文章