vue路由（基于VScode开发）

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