使用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)//将这个实例挂载到idapp的根元素上现在打开src/App.vue文件也就是根组件文件用下面的内容替换原有的内容template div idapp !--路由管道标签任何符合某一路由(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 classhello h1{{msg}}/h1 /div /template script export default { name: HelloWorld, data () { return { msg: 欢迎来到HelloWorld } } } /script现在让我们定义更多的路由在这之前先再创建一个组件。在 src/components 文件夹下创建一个 AA.vue 文件然后把下面的代码放进去。template div idaa 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