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

最新推荐文章于 2024-08-30 09:54:25 发布

Grace_Zhong

最新推荐文章于 2024-08-30 09:54:25 发布

阅读量844

点赞数 1

分类专栏： Vue + Laravel 文章标签： vue laravel

本文链接：https://blog.csdn.net/Grace_Zhong/article/details/116649189

版权

本文介绍了在Laravel项目中如何利用vue-router实现页面跳转。首先，讲述了vue-router的作用，然后详细说明了从创建路由、html页面到配置vue-router，新建vue主页面和跳转页面的步骤，并提供了测试方法。最后提到了将vue-router配置放在单独文件中的做法。

摘要由CSDN通过智能技术生成

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> 元素渲染页面