vue单页面

组件嵌套

将单文件组件组合在一起有两种方式，一种是嵌套方式，一种用路由的方式。嵌套的方式代码如下：

下图示中，假设组件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
    }
}

</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文件夹中。

将这些文件拷贝到提供数据服务的服务器的静态目录文件夹中，完成最终的上线！

组件嵌套

路由

数据请求及跨域

数据请求

跨域请求

打包上线

猜你喜欢