Vue-SPA项目构建,路由跳转

目录

一. SPA项目构建

1.什么是vue-cli

2.安装vue-cli

3.使用脚手架vue-cli(2.X版)来构建项目(需要网络)

二. 目录讲解

三. SPA项目中的路由跳转

        1.Home.vue与About.vue 

        2.index.js

        3.App.vue 

        4.main.js 

四. SPA项目中的嵌套路由

        1.About.vue

        2.AboutMe.vue与AboutWebsite

        3.index.js

---

一. SPA项目构建

1.什么是vue-cli

        vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下：

vue init webpack xxx  

注：xxx 为自己创建项目的名称

2.安装vue-cli

npm install -g vue-cli // 生成工具
npm install -g webpack // 打包工具

运行后会创建vue-cli与webpack文件夹

3.使用脚手架vue-cli(2.X版)来构建项目(需要网络)

        1.打开命令行窗口运行一下代码：

 vue init webpack xxx

        注：xxx为你的项目名，不能使用中文或大写字母 

        2.运行后会出现问答命令，可以输入相关的项目要求

 最后等待项目下载即可

二. 目录讲解

        一个vue文件有且只有一个根元素

       

 

 

  

三. SPA项目中的路由跳转

        1.Home.vue与About.vue 

                返回组件对象

<template>
  <div>首页的内容</div>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<style>
</style>

<template>
  <div>
    关于网站历史发展
  </div>
</template>

<script>
  export default {
    name: 'About',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<style>
</style>

        2.index.js

                绑定路由关系

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  routes: [{
      //默认起始页为home
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

        3.App.vue 

                定义触发点

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

        4.main.js 

                挂载路由

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

四. SPA项目中的嵌套路由

        1.About.vue

<template>
  <div>
    <router-link to="/aboutMe">关于站长</router-link>
    <router-link to="/aboutWebsite">关于网站</router-link>
    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'About',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<style>
</style>

        2.AboutMe.vue与AboutWebsite

<template>
    <div>网站历史... </div>
</template>

<script>
  export default {
    name: 'AboutWebsite',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<style>
</style>

<template>
  <div>本人毕业于xxx,在xxx公司担任xxx</div>
</template>

<script>
  export default {
    name: 'AboutMe',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<style>
</style>

        3.index.js

                在嵌套路由时要在原路由下加children属性,并在其中添加子路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'
import AboutMe from '@/components/AboutMe'
import AboutWebsite from '@/components/AboutWebsite'

Vue.use(Router)

export default new Router({
  routes: [{
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About,
      children: [
        {
            path: '/aboutMe',
            name: 'AboutMe',
            component: AboutMe
          },
          {
            path: '/aboutWebsite',
            name: 'AboutWebsite',
            component: AboutWebsite
          }
      ]
    }
  ]
})