简单配置Vue路由
简单配置Vue路由
1. 创建一个单文件组件Test.vue
<template>
<div>Test</div>
</template> <script>
export default {
}
</script> <style scoped>
</style>
2. 路由文件中引入此组件并设置路由
import Test from '../components/Test.vue' const routes = [
{ path: '/', redirect: '/test' },
{ path: '/test', component: Test }
]
3. 在根组件App.vue引入根据当前路由显示不同组件
<router-view></router-view>
注:出现一种情况使用<router-view></router-view>但是没有生效,看生成的html显示<!------>
解决:不知道当时什么情况,也是上面写法但是路由就是不生效,后来Git版本还原又重新写了一遍路由就生效了
简单配置Vue路由的更多相关文章
- Ikuai路由安装及简单配置 v1.0
第一部分:创建虚拟机: 1.点击创建新的虚拟机 2.选择自定义模式创建(选择经典模式会更友好一些),然后点击下一步 3.下图内容不用管,直接点击下一步: 4.这里是选择安装系统路径.在这里我们 ...
- 【原创】一篇学会vue路由配置 、 动态路由 、多层路由(实例)
先来看看效果图: 为了方便讲解,我没有使用vue脚手架,如果需要的,可以留言跟我要.不多说开工: 首先,html先组上 <div id="app"> <div&g ...
- K8s nginx-ingress 如何配置二级目录转发远程静态服务器基于Vue路由history模式打包的应用程序
背景 首先这标题有点绕,我先解释下: 首先我们有静态服务器,上面某个目录有Vue路由history模式打包的应用程序(也就是build后的产物): 但是静态服务器一般不做对外域名用的,我们需要在k8s ...
- vue路由的配置
一.准备工作 1安装vue-cli npm install vue-cli -g 2检查是否安装成功 vue -V(大写V) 3初始化一个新的项目 vue init webpack vue-dem ...
- spring cloud: zuul: 微网关-简单使用与路由配置
spring cloud: zuul: 微网关-简单使用与路由配置 首先引入依赖 <dependency> <groupId>org.springframework.cloud ...
- VSCode配置简单的vue项目
VSCode配置简单的vue项目 https://www.cnblogs.com/wnxyz8023/p/9989447.html 由于最近要使用的项目框架为前后端分离的,采用的是vue.js+web ...
- 使用VSCode配置简单的vue项目
由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCod ...
- Vue 路由模块化配置
博客地址:https://ainyi.com/77 企业运营后台页面很多,路由如若不区分模块化配置,所有路由挤在同一个文件将不好维护,所以路由的配置也要模块化 分享两个解决方案 -- Vue 路由配置 ...
- 三、使用VSCode配置简单的vue项目
由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCod ...
随机推荐
- JDK和Spring中的设计模式
创建型 1)工厂方法 Collection.iterator() 由具体的聚集类来确定使用哪一个Iterator 2)单例模式 Runtime.getRuntime() 3)建造者模式 StringB ...
- python中字母与ASCII码之间的转换以及进制间的转换
字母与ascii码: ord(c):参数是长度为1的字符串,简称字符.当参数为统一对象时(unicode object),返回能代表该字符的统一编码,当参数为8比特的字符串时,返回该字节的值.例如,o ...
- h-index|IF|Good story|IPS
科研论文写作 科研论文写作的关键在于写出研究的重要性. 对科研工作者的评价标准主要以论文为主,可以从论文的定性和定量角度评价.论文的外部评价,包括科学院分区(包括123类):影响因子IF,可以通过we ...
- mysql 索引和视图
第五节:创建索引5.1 创建表的时候创建索引 CREATE TABLE 表名(属性名数据类型[完整性约束条件], 属性名数据类型[完整性约束条件], .... 属性名数据类型 [UNIQUE | FU ...
- Spring Boot 集成 Spring Security
1.添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
- MongoDB的初级安装和使用
对于非关系型数据库,很多人不是很清楚,我也是作为新手慢慢摸索, 外网地址下载贼慢:我烦放在自己的百度网盘里 软件链接:https://pan.baidu.com/s/1A7h4VOfvm8N2gnlJ ...
- idea 使用sonarlint报错解决方案
在idea使用sonarlint可能出现以下报错: Plugin 'org.sonarlint.idea' failed to initialize and will be disabled. Ple ...
- 吴裕雄--天生自然python编程:turtle模块绘图(1)
Turtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位置开始,它根据一组函数指令的控制,在这个平面坐标系中移动,从而在它爬行 ...
- Jenkins之邮件通知
Jenkins默认有一个邮件通知功能,但功能比较单一,能自定义的东西很少,一般使用Extended E-mail Notification插件来发送邮件,EXT Email插件功能比较多,但设置也比较 ...
- Python 搭建webdriver环境遇到的问题总结
安装过程是参考<selenium2Python自动化测试实战>中Pythonwebdriver环境搭建章节 在安装过程中,遇到了一些问题,总结一下,为日后自己再遇到相同问题做个笔记以便查看 ...