laravel vue使用

郎永福
2023-12-01

首先安装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页面了

 

 类似资料: