index.js如果在router目录下，代表这个js文件只是路由使用
main.js中为全局，需要引入使用到的组件，一般vue中不用写东西vue中el挂载哪个就哪个组件为根目录，传值数据绑定的时候在组件（即app.vue之类的），必须返回data值，写data数据格式为：export default { name: 'App',//组件名字 data(){//固定格式，里面和data一样 return{ message: 'Welcome to Your Vue.js App' } }}
路由：APP.vue里面写<router-link to="/">hello</router-link> <router-link to="/news">news</router-link> <router-link to="/about">about</router-link>
<script>export default { name: 'App',//组件名字 data(){//固定格式，里面和data一样 return{ message: 'Welcome to Your Vue.js App' } }}
index.js里面写import News from '@/components/News'import About from '@/components/About'
routes: [ { path: '/', //自定义类似id name: 'HelloWorld',//组件名字，也可以不写 component: HelloWorld }, { path:'/news', name:'News', component:News },{ path:'/about', name:'About', component:About },]</script>
News.vue/Test.vue中<template> <div> <h1>2</h1> </div></template>
在哪用所需要的东西就在哪里声明例如路由index.js中：
import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import router from '@/components/router'Vue.use(Router)
传输请求数据main.js中import axios from 'axios'import VueAxios from 'vue-axios'Vue.use(VueAxios,axios)
如果想让数据在别的页面中显示记得在index.js中引入组件
组件router.vue中<template> <div> <pre>{{content}}</pre> //自动解析并返回json数据格式，如果是span标签就是通栏显示 </div></template><script>export default { name:'router', data(){ return{ content:'' } }, //页面挂载完成之后执行的函数 mounted(){ this.axios.post("http://api.komavideo.com/news/list").then(body=>{ this.content=body.data; }) }}</script>
转载于:https://www.cnblogs.com/huchong-bk/p/11304520.html
