初次使用vue-router时,发现配置了routes数组仍然无法访问配置的path。
访问时会出现 Connot GET /XXXX
import Vue from 'vue';
import Router from 'vue-router';
import Home from 'src@/views/Home.vue'
import FlightList from 'src@/views/FlightList.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: '/',
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/index',
component: Home
},
{
path: '/flight-list',
name: 'flightList',
component: FlightList
}
]
})
经过google后发现,vue-route使用history模式下,需要服务器后端支持,也就是后端需要为对应的请求地址返回一个html地址。因此,应该在webpack.dev.config.js中为本地服务devServer配置一个:
devServer: {
contentBase: './dist',
hot: true,
historyApiFallback: {
rewrites: [
{ from: /^\*$/, to: '/dist/index.html' }
]
}
},
分享到:
相关推荐
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
vue路由vue-router.js文件下载
vue-router 3.0.1 版本 , 2018-04-05 最新版本 .
vue-router.min.js
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现...
首先假设项目中有两个路由Profile和Posts,按写法把他们定义为一层路由,是Root的子路由,因此Root中要有router-view组件去承载子路由,才能实现子路由切换展示 一层路由 Root容器 <h1>Ro
Vue-router作为Vue.js的核心插件,用于构建单页面应用(SPA),其路由懒加载技术是Vue.js开发中经常会用到的优化手段。本文将详细介绍Vue-router中懒加载速度缓慢问题及其解决方案。 首先,需要理解什么是懒加载。...
还可以使用 `router-link` 和 `router-view` 组件来创建链接和渲染视图。 5. **路由懒加载**:Vue Router 支持路由懒加载,可以按需加载组件,减小首屏加载体积。例如,通过`import()`动态导入组件。 6. **命名...
Vue-router中文教程,Vue-router参考手册.CHM, Vue-router离线手册
- 使用`<router-view>`作为组件的占位符,Vue-router会在这里渲染匹配到的组件。 5. **高级特性** - `beforeEach`和`afterEach`钩子函数:在每次路由变化之前和之后执行,用于全局的守卫操作,比如权限验证或页面...
基于Vue+Vue-Router+Vuex+Element-ui+axios,高仿小米商城,实现的电商项目。本项目前后端分离,前端基于Vue+Vue-router+Vuex+Element-ui+Axios,参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。前端包含了...
关于 vue-cli+adminLte+vue-router 的 SPAvue-adminLte-vue-router作者liujians http://liujians.me最近在整合vue+vue-router+adminLte,用来做响应式的比较美观的SPA管理系统 项目路径...adminLte-vue-router ###介绍...
vue路由器插件 。
项目介绍 项目中整合 vue + nuxt + axios + vuex + vue-router (nuxt 自带 vuex 和 vue-router),一个基于 Nuxt 的服务器端渲染 Demo PC端项目线上地址 移动端端项目线上地址
在`router_config.js`中,我们通常会设置一个`VueRouter`实例,配置各个路由路径和对应的组件。例如: ```javascript import Vue from 'vue' import Router from 'vue-router' import Login from './views/...
vue-router官网文档学习
微信小程序开发附源码:vue-router history模式下的微信分享小结
vue3+webpack+vue-router路由封装+axios封装+vuex封装,下载资源中包括了vue3+webpack+vue-router路由封装+axios封装+vuex封装的相关代码,分别对vue-router路由进行了封装,对axios进行了封装,对vuex进行了封装,...
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统 项目经过严格测试,确保可以运行! 基于 Spring Boot 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、...
本项目前后端分离,前端基于Vue+Vue-router+Vuex+Element-ui+Axios,参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。 前端包含了11个页面:首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、...