vue2搭配vue-router3真正可用不报错的写法格式
2023-02-18 15:37:02 时间
这里要吐槽下vue和vue-router的文档教程
本身前端的版本就多,版本之间还各种不兼容,用法函数还多种多样,一会这个组件一会那里是按普通渲染,简直让人不知道按哪个才是对的。
然后文档里,一会是cdn引入安装的,后面又是npm编译安装的。走了一遍流程各种各样的报错,简直是无语了,不大符合渐进式这个概念。
下面是最基本的结构
访问的时候是
域名/ 能正确加载模板
测试路由为 域名/#/login 能正确加载到模板
main.js
import Vue from 'vue' import VueRouter from 'vue-router' import Login from './components/Login.vue' import App from './App.vue' Vue.config.productionTip = false Vue.use(VueRouter) const routes = [ { path: '/login', component: Login }, ] const router = new VueRouter({ routes }) const app = new Vue({ render: h => h(App), router }).$mount('#app')
App.vue
<template> <div id="app"> <router-view></router-view> <div>导航部分</div> </div> </template> <script> export default { name: 'app', } </script>
./components/Login.vue
<template> <div> 登录页 </div> </template> <script> export default { name: 'Login', } </script> <style> </style>
package.json
{ "name": "default", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" }, "dependencies": { "core-js": "^2.6.5", "vue": "^2.6.10", "vue-router": "^3.6.5" }, "devDependencies": { "@vue/cli-plugin-babel": "^3.8.0", "@vue/cli-service": "^3.8.0", "vue-template-compiler": "^2.6.10" } }
相关文章
- 数据库系列:高并发下的数据字段变更
- Redis系列1:深刻理解高性能Redis的本质
- 微服务9:服务治理来保证高可用
- MQ系列1:消息中间件执行原理
- 微服务8:通信之RPC实践篇(附源码)
- 基于AOP的动态数据源切换(附源码)
- 微服务7:通信之RPC
- 微服务6:通信之网关
- 架构与思维:高并发下解决主从延时的一些思路
- 微服务5:服务注册与发现(实践篇)
- 分布式:分布式系统下的唯一序列
- 微服务4:服务注册与发现
- 架构与思维:分布式锁方案分析
- 微服务3:微服务拆分策略
- 架构与思维:高并发下幂等性解决方案
- 微服务2:微服务全景架构
- 分布式:分布式事务(CAP、两阶段提交、三阶段提交)
- 微服务1:微服务及其演进史
- 架构与思维:一次缓存雪崩的灾难复盘
- 架构与思维:设计容量,到底有多重要 ?