vue路由(基于VScode开发)

纵然是瞬间 提交于 2020-03-26 02:00:51

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>

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!