php单页应用,Laravel - 结合 Vue 开发一个单页应用（附样例）

(1)创建导航组件，路径 resources/js/components/Navigation.vue，内容如下：

您好：{{ username }}(注销)

---

export default {

data () {

return {

username: this.$store.state.username

}

},

methods: {

// 注销按钮点击

logout() {

// 清除保存的用户名并跳回登录页

this.$store.commit('setUsername', '');

this.$router.push("/login");

}

},

}

(2)创建文章列表组件，路径 resources/js/components/List.vue，内容如下：

• {{ item.title }}

import HttpAPI from '../api/httpAPI.js';

export default {

data() {

return {

list: []

}

},

methods: {

},

// 页面创建时自动加载列表数据

created() {

// 发起请求

HttpAPI.getList( )

.then(( response ) => {

if(response.data.status) {

this.list = response.data.result;

}

})

}

}

(3)创建文章详情组件，路径resources/js/components/Detail.vue，内容如下：

标题：{{ detail.title }}

内容：{{ detail.content }}

返回列表

import HttpAPI from '../api/httpAPI.js';

export default {

data() {

return {

detail: {}

}

},

// 页面创建时通过路由中的参数ID加载详情数据

created() {

// 发起请求

HttpAPI.getDetail(this.$route.params.id)

.then(( response ) => {

if(response.data.status) {

this.detail = response.data.result;

}

})

},

methods: {

}

}

7，路由配置