Laravel 项目中用 vue-router 实现页面跳转
Posted Grace_Zhong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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></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 元素 <router-link> 点击跳转到 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> 点击跳转到根目录 '/'
<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
另
把 vue-router 放在单独的文件里见
Laravel项目中用 vue-router实现页面跳转之vue-router写在单独的文件中.
以上是关于Laravel 项目中用 vue-router 实现页面跳转的主要内容，如果未能解决你的问题，请参考以下文章
Laravel 项目中用 vue-router 实现页面跳转
Laravel 项目中用 vue-router 实现页面跳转
Vue-Router 不在单页应用程序中重新路由（Vue/Laravel）