基于VueRouter构建单页应用项目骨架

从今天开始，学院将花几个教程，让大家快速了解如何基于Laravel框架开发单页应用。1.初始化项目和前端依赖在开始之前，通过以下步骤初始化一个新的Laravel项目作为单页应用演示项目：//1.初始化Laravel项目laravelnewdemo-spa//2.安装laravel/ui扩展包cddemo-spacomposerrequirelaravel/uiphpartisanuivue//3.安装&编译前端依赖npminstall&&npmrundev2.安装VueRouter和Vuex基于Vue框架、VueRouter和Vuex是必不可少的前端依赖库，前者是Vue官方提供的前端页面路由管理器，后者是Vue官方提供的前端组件状态（数据）管理器。这两个依赖库的语法细节这里就不展开了，大家可以参考对应的官方文档或者在线视频更深入的了解。我们可以在demo-spa项目的根目录下通过以下命令安装这两个前端依赖：npminstallvue-routervuex--save-dev安装完成后，就可以在resources/中引入使用了js/app.js现在以VueRouter为例，我们可以在resources/js目录下新建routes.js作为前端路由文件，然后在app中通过VueRouter导入前端路由。js是这样的：window.Vue=require('vue');从'vue-router'导入VueRouter;从'./routes'导入路由;Vue.use(VueRouter);...constapp=newVue({el:'#app',router:newVueRouter(routes)});3、编写前端页面组件为了演示前端路由的使用，我们先在resources/js/components目录下创建两个页面组件Home.vue：和About.vue:四、写前端路由导航接下来我们在前端路由文件resources/js/routes.js中写几条测试路由exportdefault{mode:'history'，路线：[{路径：'/'，组件：要求（'./components/Home').default},{path:'/about',component:require('./components/About').default}]}这里使用HTML5的History模式实现不同前端之间的无页面路由-结束路线刷新切换5.在HTML视图中渲染前端路由导航完成以上准备后，就可以在HTML视图模板中渲染VueRouter路由匹配的前端页面组件了，方法如下：getLocale())}}">