vue2搭配vue-router3真正可用不报错的写法格式
2023-02-18 15:36:58 时间
这里要吐槽下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" } }
相关文章
- C#开发微信公众平台-就这么简单(附Demo)
- 程序员的人性思考(续)
- 恋爱虽易,相处不易:当EntityFramework爱上AutoMapper
- 魅力 .NET:从 Mono、.NET Core 说起
- 分享我对 ASP.NET vNext 的一些感受,也许多年回过头看 So Easy!
- 我的“第一次”,就这样没了:DDD(领域驱动设计)理论结合实践
- 程序员的人性思考(下)
- 2015-写给明年现在的自己
- POCO Controller 你这么厉害,ASP.NET vNext 知道吗?
- Unity依赖注入使用详解
- 初试JqueryEasyUI(附Demo)
- ASP.NET WebApi OWIN 实现 OAuth 2.0
- 程序员的人性思考(上)
- Visual Studio 2015 开发 ASP.NET 5 有何变化?
- 拨开迷雾,找回自我:DDD 应对具体业务场景,Domain Model 到底如何设计?
- Repository 返回 IQueryable?还是 IEnumerable?
- 一缕阳光:DDD(领域驱动设计)应对具体业务场景,如何聚焦 Domain Model(领域模型)?
- 让 ASP.NET vNext 在 Mac OS 中飞呀飞。。。
- 小菜学习设计模式(五)—控制反转(Ioc)
- 掀起你的盖头来:Unit Of Work-工作单元