Laravel 项目中用 vue-router 实现页面跳转

vue-router 作用
保留页面部分内容,实现页面跳转

准备工作
切换到项目根目录下,安装 vue-router

npm install vue-router

Laravel Framework 8.40.0
vue version: 2.6.12
vue-router version: 3.5.1

整体思路
laravel 路由文件 web.php -> view 中的页面 -> app.js -> component 中的 vue 文件

创建路由

在 routes/web.php 中添加一个路由,网址为 http://localhost:8000/testVueRoute,显示页面为 resources/view 中的 testVueRoute.blade.php

Route::get('/testVueRoute', function(){
     
    return view('testVueRoute');
});

创建 html 页面

在 resources/view 中新建一个文件 testVueRoute.blade.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        // 引入 css 文件
        <link href="{
     {asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
    	// id 为 app,要跟 app.js 中的 id 一致
        <div id="app">
            <h1>testVueRoute Page</h1>
            // 使用 vue 中的  元素渲染页面
            <router-view></router-view>
        </div>
        // 引入 app.js 文件
        <script src="{
     {asset('js/app.js')}}" ></script>
    </body>
</html>

使用 vue-router

编辑 resources/js/app.js,app.js 为 laravel 项目中 vue 的入口文件

require('./bootstrap');
import Vue from 'vue'
// 引入 vue-router
// 必须用 import, 如果用 window.Vue = require('vue');会报错
import VueRouter from 'vue-router'

// 使用 vue-router
Vue.use(VueRouter)

const routes = [
	// '/'为 testVueRoute.blade.php 的路径,即 'http://127.0.0.1:8000/testVueRoute'
	// 调用 resources/js/component 中的文件
  	{
      path: '/', component: require('./components/ExampleComponent.vue').default },
  	// url 为 http://127.0.0.1:8000/testVueRoute#/page
  	{
      path: '/page', component: require('./components/Page.vue').default }
]

// 为上面的变量 routes 新建一个实例
// 变量名必须为 router, 否则报错 app.js:41520 [Vue warn]: Error in render: "TypeError: Cannot read property 'matched' of undefined"
const router = new VueRouter({
     
  	routes
})

const app = new Vue({
     
	// 使用新建的实例
  	router
}).$mount('#app')

// 同上
// const app = new Vue({
     
//     el: '#app',
//     router
// });

新建 vue 主页面

resources/js/component 中新建一个文件 ExampleComponent.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Home Component</div>
                    <div class="card-body">
                        Welcome to Example Component <br/>
                        // 使用 vue 元素  点击跳转到 page
                        <router-link to="/page">Go to Page</router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
     
        mounted() {
     
            console.log('Component mounted.')
        }
    }
</script>

新建 vue 跳转页面

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Page Component</div>
                    <div class="card-body">
                    	// 使用 vue 元素  点击跳转到根目录 '/'
                        <router-link to="/">Go to Example Component</router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
     
        mounted() {
     
            console.log('Component mounted.')
        }
    }
</script>

测试使用

编译刚刚写好的 vue 文件

npm run dev
// 或 npm run watch

打开 127.0.0.1:8000/testVueRoute
Laravel 项目中用 vue-router 实现页面跳转_第1张图片

把 vue-router 放在单独的文件里见
Laravel项目中用 vue-router实现页面跳转之vue-router写在单独的文件中.

你可能感兴趣的:(Vue,+,Laravel,vue,laravel)