使用VUE搭建单页应用(SPA）

今天我们学习的是如何用VUE构建一个简单的单页应用(SPA)，首先我们要学习这个的前提是要 ‘搭建好NodeJs环境，用vue-cli脚手架创建好项目’。

项目创建好之后，运行 ‘npm run dev’ ,当上面的命令运行起来的时候，用浏览器访问 http://localhost:8080 这个地址，我们会看到如下页面：

接下来就是路由的安装与配置：在我们正式开始配置我们的单页程序之前，还有一个东西必须安装，vue-router。vue-router 是VUE官方提供的一个路由组件，专门用来构建VUE的单页程序。我们使用vue-router的原因就是它可以使我们的页面在前端就完成切换，而不是每次切换页面都要向服务器重新请求数据，重载页面。

我们可以用下面的命令安装vue-router.

npm install vue-router --save

接下来让我们打开 src/main.js 文件夹把路由模块配置到我们的程序里.

复制下面的内容并替换原来的 src/main.js:

// 导入vue实例
import Vue from 'vue'
//导入 App 组件
import App from './App'
//导入 vue router
import VueRouter from 'vue-router'

//导入helloworld组件
import HelloWorld from './components/HelloWorld'
import aa from './components/aa'

//告诉vue使用vue-router路由组件
Vue.use(VueRouter)
//定义路由表
const routes = [
//将根URL加入到路由表并声明对应Hello组件.
    { path: '/', component: HelloWorld },
    { path: '/aa', component: aa }
]

// 创建路由器实例，并且传入`routes`变量作为路由。
// 你还可以传入别的参数，不过在这里尽量简单化就可以了
const router = new VueRouter({
  routes, 
  mode: 'history'
})
//实例化Vue实例
new Vue({
  //定义Vue绑定的跟元素
  el: '#app',
  //用<App/>代替根元素
  template: '<App/>',
  //声明App组件，这样上面的<App/>元素就可以生效
  components: { App },
  //将上面声明的路由器传递到根Vue实例
  router
}).$mount('#app')//将这个实例挂载到id=app的根元素上

现在打开src/App.vue文件，也就是根组件文件，用下面的内容替换原有的内容：

<template>
  <div id="app">
  <!--路由管道标签，任何符合某一路由(route)信息的组件都会在这个标签内展示出来 -->
  <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
}
</script>
<!-- css格式 -->
<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>

路由初始化

这时候我们需要定义HelloWorld模块作为我们的HelloWorld页面，然后把相应的路由信息(route)加到路由表(routes)中

打开main.js文件，把routes变量修改成如下形式并导入HelloWorld组件：(上面的页面已经写好)

//导入hello组件

import Hello from './components/Hello'

//定义路由表

const routes = [

//将根URL加入到路由表并声明对应Hello组件.

{ path: '/', component: Hello }

]

在上面的代码中我们引入了脚手架默认添加的Hello组件，并且将根URL / 对应到了HelloWorld组件上，这时候如果我们重新运行程序，会像下面这样：

页面代码：

<template>
  <div class="hello">
   <h1>{{msg}}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '欢迎来到HelloWorld'
    }
  }
}
</script>

现在，让我们定义更多的路由，在这之前先再创建一个组件。

在 src/components 文件夹下创建一个 AA.vue 文件，然后把下面的代码放进去。

<template>
  <div id="aa">
    <h1>{{aa}}</h1>
  </div>
</template>

<script>
export default {
  name: 'aa1',
  data () {
    return {
      aa: 'When you have a great story'
    }
  }
}
</script>

让我们来看看上面这个AAt组件，这个组件里面只有简单的一句话，当URL正好对应这个组件的时候，它就会被渲染到<router-view>标签里面。

在这之前，我们需要在路由表中加入这个组件对应的路由。

打开 main.js 然后把路由表(routes)改成如下形式。

//导入Hello组件
import Hello from './components/Hello'
//导入Aboiut组件
import About from './components/About'
//定义路由表
const routes = [
//对应Hello组件的路由地址
{ path: '/', component: Hello },
//对应About组件的路由地址
{ path: '/about', component: About }

上面代码唯一的改动就是增加了AA组件的引入和对应的路由信息。

但是我们不能总是手工在浏览器中输入地址去切换页面，所以我们需要用到另一个路由器标签<router-link></router-link>。

打开 App.vue 文件，然后在<router-view>标签上面加入两个<router-link>标签：

这时候如果你重新启动程序，会注意到页面上多了两个可以点击的超链接，点击任意一个，页面和URL也会随着变动，而且页面并没有重载。

程序看起来是这个样子的：

参考资源：https://www.jianshu.com/p/1a7bbdd8ca4e