vue单页面
2018-07-12 13:19
50 查看
组件嵌套
将单文件组件组合在一起有两种方式,一种是嵌套方式,一种用路由的方式。嵌套的方式代码如下:下图示中,假设组件A中要嵌入组件B
<template> // 在A组件中使用B组件 <B_zujian></B_zujian> </template> <script> // 先导入B组件,其中'@'表示src目录,组件后的vue扩展名可以省略 import B_zujian from '@/components/B_zjian' export default{ name:'A_zujian', data:function(){ return { iNum:0 } }, // 接着在components属性选项中注册 components:{ B_zujian } }[p]
</script>
路由
可以通过路由的方式在一个组件中加载其他组件,要使用路由功能,需要在main.js中先导入路由的包,然后在组件对象中还需要包含它。import router from './router' new Vue({ ..... router })组件中通过路由标签来加载其他的路由
<!-- 路由标签 --> <router-view></router-view> <!-- 简写成下面一个标签的形式: --> <router-view/>路由标签里面加载哪个组件呢?在router文件中的index.js文件中设置
import Vue from 'vue' import Router from 'vue-router' // 导入对应组件 '@' 表示src文件夹 import MainList from '@/components/MainList' import UserList from '@/components/UserList' import UpDate from '@/components/UpDate' // 使用路由模块的固定写法 Vue.use(Router) // path为'/'表示路由默认加载的组件 // 这些路由默认设置的是App.vue中的路由标签加载的组件 export default new Router({ routes: [ { path: '/', name: 'MainList', component: MainList }, { path: '/user', name: 'UserList', component: UserList }, { path: '/update', name: 'UpDate', component: UpDate } ] })通过链接可以切换路由标签里面对应的组件,链接的地址是上面index.js文件中定义的path值,不过链接标签是"router-link",链接地址用'to'来定义:
<router-link to="/">股票信息</router-link> <router-link to="/user">个人中心</router-link>链接地址中可以传递参数,格式如下:
// name对应的是路由中定义的一个path对应的name属性 <router-link :to='{name:"UpDate",params:{code:item.code}}'>有时候需要在组件的js中跳转页面,也就是改变路由,改变路由有下面这些方式:
// 当前页面重新加载 this.$router.go('/user'); // 跳转到另外一个路由 this.$router.push({path:'/user'}); // 获取当前的路由地址 var sPath = this.$route.path;
数据请求及跨域
数据请求
数据请求使用的是ajax,在vue中使用的axios.js,这个文件可以在index.html文件中引入,也可以作为模块导入,在main.js中导入这个模块,然后将它绑定在Vue类的原型上。import axios from 'axios' Vue.prototype.axios = axios在组件的js代码中使用axios:
this.axios({......})
跨域请求
vue的自动化工具提供了开发的服务器,我们在这个服务器环境下开发,改动代码可以马上更新显示,错误了还有代码提示,非常方便,但是,如果我们组件中需要数据,而且数据在另一个服务器环境下运行,我们就需要跨域请求数据,vue工具中可以使用代理来跨域请求,设置的方法是:在项目的config文件夹中,打开index.js,在proxyTable一项中设置:// 'http://localhost:7890' 表示的是要跨域请求的地址 // 如果请求的地址是:'http://localhost:7890/index_data' // 在请求时就可以写成: '/apis/index_data' '/apis': { target: 'http://localhost:7890', changeOrigin: true, pathRewrite: { '^/apis': '' } }
打包上线
项目开发完成后,需要把请求数据的代理地址改成和提供数据的服务器在同一个域的地址,因为最终会把前端代码放在和数据在同一个域的服务器下面运行。// 将下面的请求地址 '/apis/index_data' // 改成 '/index_data'改完请求地址后,就可以将代码打包,生成最终可以上线的单文件结构:
// 打开终端,ctrl+c停掉开发服务器,执行下面的命令 npm run build自动化程序会将打包的文件自动生成到项目的dist文件夹中。将这些文件拷贝到提供数据服务的服务器的静态目录文件夹中,完成最终的上线![/p]
阅读更多
相关文章推荐
- 详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
- vue-router 页面传参的俩种方法
- vue页面闪烁[解决]
- 用vue实现登录页面
- 解决Vue页面固定滚动位置的处理办法
- vue前端页面跳转参数传递及存储
- vue手写的轮播图片,解决已经修改data中的值,页面标签已绑定,但页面没效果
- Vue页面骨架屏的实现方法
- Vue 爬坑之路(三)—— 使用 vue-router 跳转页面
- vue2.0通过二级路由实现页面切换
- 【VUE】通过后端重定向到VUE的页面后,前端路由失效的解决方案!
- 使用vue-router切换页面时,获取上一页url以及当前页面url
- 解决使用Vue.js显示数据的时,页面闪现原始代码
- vue页面跳转
- Asp.net+Vue2构建简单记账WebApp之四(vue.js构建记账主页面)
- Spring boot+Shiro+ spring MVC+swagger UI +Mybatis+mysql+Vue +Element UI 之三 vue简单页面实战
- 博客前端vue和豆瓣页面
- vue 中使用keep-alive进行页面缓存
- 基于VUE选择上传图片并页面显示(图片可删除)
- Vue 2.0 页面刚启动时如何做路由的重定向?