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

一. SPA项目构建

1. 前提搭建好NodeJS环境

2. 什么是vue-cli

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

vue init webpack xxx  

注1：xxx 为自己创建项目的名称
注2：必须先安装vue,vue-cli，webpack，node等一些必要的环境

3. 安装vue-cli

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

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

1. 打开命令窗口

2. 使用命令创建项目(会在当前目录生成项目,可以在命令行更改当前目录)

    vue init webpack spa1
   

   spa1即为项目名，项目名不能用中文或大写字母

3. 终端会出现“一问一答”模式
   
   
   等待下载
   
   如图项目构建完成

二. 目录讲解

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

![在这里插入图片描述](https://img-blog.csdnimg.cn/5e8ad8a9de4140b78cd0b66891f36470.png)

三. SPA项目中的路由跳转

• Home.vue
  返回组件对象

  <template>
    <div>首页的内容</div>
  </template>
  
  <script>
    export default {
      name: 'Home',
      data() {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
  </script>
  
  <style>
  </style>
  
  

• About.vue
  返回组件对象

  <template>
    <div>
      关于网站历史发展
    </div>
  </template>
  
  <script>
    export default {
      name: 'About',
      data() {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
  </script>
  
  <style>
  </style>
  
  

• 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: [{
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/home',
        name: 'Home',
        component: Home
      },
      {
        path: '/about',
        name: 'About',
        component: About
      }
    ]
  })
  

• 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>
  
  

• 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项目中的嵌套路由

• 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>
  
  

• AboutMe.vue

  <template>
    <div>本人毕业于xxx,在xxx公司担任xxx</div>
  </template>
  
  <script>
    export default {
      name: 'AboutMe',
      data() {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
  </script>
  
  <style>
  </style>
  
  

• AboutWebsite

  <template>
      <div>网站历史... </div>
  </template>
  
  <script>
    export default {
      name: 'AboutWebsite',
      data() {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
  </script>
  
  <style>
  </style>
  
  

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