laravel vue使用

最新推荐文章于 2024-04-23 09:46:01 发布

tang05709

最新推荐文章于 2024-04-23 09:46:01 发布

阅读量1.6k

点赞数

分类专栏： php

本文链接：https://blog.csdn.net/tang05709/article/details/106354095

版权

php 专栏收录该内容

209 篇文章 1 订阅

订阅专栏

首先安装vue和vue-router

npm install vue

npm install vue-router

laravel默认已经有了axios，所以可以不用安装

第一步，建立3个文件

第一个文件App.vue 放在js/components目录下

<template>
  <div class="">
  <div class="">vue demo</div>
  <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

第二个文件Login.vue，放在js/components/auth目录下

<template>
  <div class="">
  <div class="">vye login</div>
  <router-link to="/authuserinfo">info</router-link>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      phone: ''
    }
  },
  mounted () {
    this.getResult()
  },
  methods: {
    getResult () {
      var phone = this.$route.params.phone
      this.$axios.post('/api/login').then(response => {
        console.log(response)
      }).catch(error => {
        console.log(error)
       
      })
    }
  }
}
</script>

第三个文件Info.vue，放在js/components/auth目录下

<template>
  <div class="">
  <div class="">vue info</div>
   
  </div>
</template>

<script>
export default {
  name: 'AuthUserInfo',
  data () {
    return {
      phone: ''
    }
  },
  mounted () {
    this.getResult()
  },
  methods: {
    getResult () {
      var phone = this.$route.params.phone
      this.$axios.post('/api/authuserinfo').then(response => {
        console.log(response)
      }).catch(error => {
        console.log(error)
       
      })
    }
  }
}
</script>

第二步，在js目录下建立routes.js

import VueRouter from 'vue-router'
window.Vue = require('vue')
Vue.use(VueRouter)

import Login from './components/auth/Login'
import AuthUserInfo from './components/auth/Info'

export default new VueRouter({
  mode: 'history',
  routes: [
      {
          path: '/login',
          name: 'login',
          component: Login
      },
      {
          path: '/authuserinfo',
          name: 'authuserinfo',
          component: AuthUserInfo,
      },
  ],
})

第三步，修改app.js

require('./bootstrap');

import axios from 'axios'
import router from './routes.js'
import App from './components/App'

window.Vue = require('vue')
Vue.prototype.$axios = axios

const app = new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

第四步，在views目录下新建index.blade.php

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>laravel-vue-iview项目</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="/css/app.css"  media="all">
</head>
<body>
<div id="app">

</div>
<script src="/js/app.js" charset="utf-8"></script>
</body>
</html>

第五步。在controllers目录下新建IndexController.php

class IndexController extends FrontendController
{
    
  public function index()
  {
    return view("index");
  }
}

第七步，在修改routes/web.php

Route::get('/{any}', 'IndexController@index')->where('any', '.*');

这里是关键，不然访问vue的路由会报404

第八步，在controllers目录下建立Api目录，并建立AuthController.php

class AuthController extends ApiController
{
    
  public function login()
  {
    $data = [
      'data' => 'login'
    ];
    return $data;
  }

  public function info()
  {
    $data = [
      'data' => 'info'
    ];
    return $data;
  }
}

第九步，修改routes/api.php

Route::namespace('Api')->group(function () {
    // Controllers Within The "App\Http\Controllers\Api" Namespace
    Route::post('/login', 'AuthController@login');
    Route::post('/authuserinfo', 'AuthController@info');
});

访问/login，如果没问题，就能看到vue demo页面了

tang05709

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
laravel vue使用

首先安装vue和vue-routernpm install vuenpm install vue-routerlaravel默认已经有了axios，所以可以不用安装第一步，建立3个文件第一个文件App.vue 放在js/components目录下<template> <div class=""> <div class="">vue demo</div> <router-view></router-v.
复制链接

扫一扫