简单配置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路由的更多相关文章

  1. Ikuai路由安装及简单配置 v1.0

    第一部分:创建虚拟机: 1.点击创建新的虚拟机   2.选择自定义模式创建(选择经典模式会更友好一些),然后点击下一步 3.下图内容不用管,直接点击下一步:   4.这里是选择安装系统路径.在这里我们 ...

  2. 【原创】一篇学会vue路由配置 、 动态路由 、多层路由(实例)

    先来看看效果图: 为了方便讲解,我没有使用vue脚手架,如果需要的,可以留言跟我要.不多说开工: 首先,html先组上 <div id="app"> <div&g ...

  3. K8s nginx-ingress 如何配置二级目录转发远程静态服务器基于Vue路由history模式打包的应用程序

    背景 首先这标题有点绕,我先解释下: 首先我们有静态服务器,上面某个目录有Vue路由history模式打包的应用程序(也就是build后的产物): 但是静态服务器一般不做对外域名用的,我们需要在k8s ...

  4. vue路由的配置

    一.准备工作 1安装vue-cli  npm install vue-cli -g 2检查是否安装成功 vue -V(大写V) 3初始化一个新的项目 vue init  webpack vue-dem ...

  5. spring cloud: zuul: 微网关-简单使用与路由配置

    spring cloud: zuul: 微网关-简单使用与路由配置 首先引入依赖 <dependency> <groupId>org.springframework.cloud ...

  6. VSCode配置简单的vue项目

    VSCode配置简单的vue项目 https://www.cnblogs.com/wnxyz8023/p/9989447.html 由于最近要使用的项目框架为前后端分离的,采用的是vue.js+web ...

  7. 使用VSCode配置简单的vue项目

    由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCod ...

  8. Vue 路由模块化配置

    博客地址:https://ainyi.com/77 企业运营后台页面很多,路由如若不区分模块化配置,所有路由挤在同一个文件将不好维护,所以路由的配置也要模块化 分享两个解决方案 -- Vue 路由配置 ...

  9. 三、使用VSCode配置简单的vue项目

    由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCod ...

随机推荐

  1. JDK和Spring中的设计模式

    创建型 1)工厂方法 Collection.iterator() 由具体的聚集类来确定使用哪一个Iterator 2)单例模式 Runtime.getRuntime() 3)建造者模式 StringB ...

  2. python中字母与ASCII码之间的转换以及进制间的转换

    字母与ascii码: ord(c):参数是长度为1的字符串,简称字符.当参数为统一对象时(unicode object),返回能代表该字符的统一编码,当参数为8比特的字符串时,返回该字节的值.例如,o ...

  3. h-index|IF|Good story|IPS

    科研论文写作 科研论文写作的关键在于写出研究的重要性. 对科研工作者的评价标准主要以论文为主,可以从论文的定性和定量角度评价.论文的外部评价,包括科学院分区(包括123类):影响因子IF,可以通过we ...

  4. mysql 索引和视图

    第五节:创建索引5.1 创建表的时候创建索引 CREATE TABLE 表名(属性名数据类型[完整性约束条件], 属性名数据类型[完整性约束条件], .... 属性名数据类型 [UNIQUE | FU ...

  5. Spring Boot 集成 Spring Security

    1.添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  6. MongoDB的初级安装和使用

    对于非关系型数据库,很多人不是很清楚,我也是作为新手慢慢摸索, 外网地址下载贼慢:我烦放在自己的百度网盘里 软件链接:https://pan.baidu.com/s/1A7h4VOfvm8N2gnlJ ...

  7. idea 使用sonarlint报错解决方案

    在idea使用sonarlint可能出现以下报错: Plugin 'org.sonarlint.idea' failed to initialize and will be disabled. Ple ...

  8. 吴裕雄--天生自然python编程:turtle模块绘图(1)

    Turtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位置开始,它根据一组函数指令的控制,在这个平面坐标系中移动,从而在它爬行 ...

  9. Jenkins之邮件通知

    Jenkins默认有一个邮件通知功能,但功能比较单一,能自定义的东西很少,一般使用Extended E-mail Notification插件来发送邮件,EXT Email插件功能比较多,但设置也比较 ...

  10. Python 搭建webdriver环境遇到的问题总结

    安装过程是参考<selenium2Python自动化测试实战>中Pythonwebdriver环境搭建章节 在安装过程中,遇到了一些问题,总结一下,为日后自己再遇到相同问题做个笔记以便查看 ...