简单配置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. HashMap相关知识

    HashMap的工作原理是近年来常见的Java面试题.几乎每个Java程序员都知道HashMap,都知道哪里要用HashMap,知道Hashtable和HashMap之间的区别,那么为何这道面试题如此 ...

  2. JAVA的堆栈和内存、垃圾回收解说

    1.有关java健壮性特点的真相 很多书上都说java健壮性的特点是因为java使用数组代替了c++的指针:c++最令人头痛的问题就是内存问题,java的健壮性使编程人员不用再考虑内存的问题:这种观点 ...

  3. jQuery ajax中的参数含义

    所有options均可选,下面简要说明每个option 1.async 默认为true,即请求为异步请求,这也是ajax存在的意义.但同时也可以将这个参数设置为false,实现同步请求.(同步请求会锁 ...

  4. js页面--年份自动增加

    ) { document.write("-" + new Date().getFullYear()); }</script> // 大于2017年自动加上 - 年份

  5. HDU1233 还是畅通工程

    题目: Problem Description 某省调查乡村交通状况,得到的统计表中列出了任意两村庄间的距离.省政府“畅通工程”的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直接的公路相连 ...

  6. 升级本地已安装的 Node 和 npm 版本

    Mac升级本地已经安装的NodeJs和Npm到最新版,可以使用一下方式进行升级和更新. 其实windos上升级nodejs也很简单,只需在nodejs官网下载安装最新的msi即可. 值得注意的是安装时 ...

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

    #彩色螺旋线 import turtle import time turtle.pensize(2) turtle.bgcolor("black") colors = [" ...

  8. ES7中的async和await

    ES7中的async和await 在上一章中,使用Promise将原本的回调方式转换为链式操作,这就将一个个异步执行的操作串在一条同步线上了.下一次的操作必须等待当前操作的结束. 使用Promise的 ...

  9. python socket粘包及实例

    1.在linux中经常出现粘包的出现(因为两个send近靠着,造成接受到的数据是在一起的.)解决方法: 在服务端两send的中间中再添加一个recv(),客户端添加一个send(),服务端收到信息确认 ...

  10. ndk-stack使用方法(转)

    最近在mac上编译android 版本,各种崩溃让人蛋疼,网上学习了下ndk-stack使用方法. 自己备忘下: 1.运行终端. 跳转到你android sdk 目录 因为你的adb 在里面. 如 c ...