Vue基础系列文章11---router基本使用
1、系统中引入路由js文件，加两个连接，分别到用户管理和用户注册页面
<router-link to="/user">用户列表</router-link>
<router-link to="/regis">注册列表</router-link>
2、加入路由占位符
<body>
<div id="app">
<router-link to="/user">用户列表</router-link>
<router-link to="/regis">注册列表</router-link>
<!--路由占位符-->
<router-view></router-view>
</div>
</body>
3、定义好要跳转的组件
const User={
template:"<h1>用户管理页面</h1>"
}
const Regis={
template:"<h1>注册页面</h1>"
}
4、创建路由实例对像
//创建路由实例对象
const router = new VueRouter({
routes:[
{path:'/user',component:User},
{path:'/regis',component:Regis}
]
});
5、将中由对象挂到vue对象中去
var vm = new Vue({
el:'#app',
data:{
},
methods:{
},
router:router
});
6、整个文件的代码最后看起来是这样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<router-link to="/user">用户列表</router-link>
<router-link to="/regis">注册列表</router-link>
<!--路由占位符-->
<router-view></router-view>
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script> </html>
<script type="text/javascript"> const User={
template:"<h1>用户管理页面</h1>"
}
const Regis={
template:"<h1>注册页面</h1>"
} //创建路由实例对象
const router = new VueRouter({
routes:[
{path:'/user',component:User},
{path:'/regis',component:Regis}
]
}); var vm = new Vue({
el:'#app',
data:{ },
methods:{ },
router:router }); </script>
Vue基础系列文章11---router基本使用的更多相关文章
- JVM基础系列第11讲：JVM参数之堆栈空间配置
JVM 中最重要的一部分就是堆空间了,基本上大多数的线上 JVM 问题都是因为堆空间造成的 OutOfMemoryError.因此掌握 JVM 关于堆空间的参数配置对于排查线上问题非常重要. tips ...
- Vue基础系列（三）——Vue模板中的数据绑定语法
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Vue基础系列（二）——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
- Vue基础系列（四）——Vue中的指令（上）
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Vue基础系列（五）——Vue中的指令（中）
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Java基础系列（11）- 变量、常量、作用域以及变量的命名规范
变量 变量是什么:就是可以变化的量 Java是一种强类型语言,每个变量都必须声明其类型 Java变量是程序中最基本的存储单元,其要素包括变量名,变量类型和作用域 type varName [=valu ...
- JVM基础系列第13讲：JVM参数之追踪类信息
我们都知道 JVM 在启动的时候会去加载类信息,那么我们怎么得知他加载了哪些类,又卸载了哪些类呢?我们这一节就来介绍四个 JVM 参数,使用它们我们就可以清晰地知道 JVM 的类加载信息. 为了方便演 ...
- JVM基础系列第10讲：垃圾回收的几种类型
我们经常会听到许多垃圾回收的术语,例如:Minor GC.Major GC.Young GC.Old GC.Full GC.Stop-The-World 等.但这些 GC 术语到底指的是什么,它们之间 ...
- JVM基础系列第9讲：JVM垃圾回收器
前面文章中,我们介绍了 Java 虚拟机的内存结构,Java 虚拟机的垃圾回收机制,那么这篇文章我们说说具体执行垃圾回收的垃圾回收器. 总的来说,Java 虚拟机的垃圾回收器可以分为四大类别:串行回收 ...
- JVM基础系列第8讲：JVM 垃圾回收机制
在第 6 讲中我们说到 Java 虚拟机的内存结构,提到了这部分的规范其实是由<Java 虚拟机规范>指定的,每个 Java 虚拟机可能都有不同的实现.其实涉及到 Java 虚拟机的内存, ...
随机推荐
- 火山引擎DataLeap数据调度实例的 DAG 优化方案 （二）：功能设计
针对上面存在的问题以及对需求的分析,我们可以进行如下的功能实现与设计: 首先是渲染方案的替换,将 svg 的渲染方案替换成 canvas 渲染,通过减少页面中 DOM 的数量,提高前端渲染性能. 其次 ...
- Intellij IDEA 关闭阿里编码规约“请不要使用行尾注释”提醒
Settings -> Inspections -> 注释 取消 "方法内部单行注释 xxxx " 里面的勾,[设完后重启]如下图
- python 线程池 ThreadPoolExecutor
从Python3.2开始,标准库为我们提供了concurrent.futures 模块,它提供了 ThreadPoolExecutor (线程池)和 ProcessPoolExecutor (进程池) ...
- Python分析大数据，推荐四款加速器
在数据科学计算.机器学习.以及深度学习领域,Python 是最受欢迎的语言.Python 在数据科学领域,有非常丰富的包可以选择,numpy.scipy.pandas.scikit-learn.mat ...
- 【k8s】基本原理学习
k8s基本原理 https://www.cnblogs.com/BlueBlueSea/p/16908601.html 深入理解Kubernetes网络 深入理解Kubernetes的pod网络 参考 ...
- CH#17C 舞动的夜晚（最大流+强连通分量）
舞动的夜晚 CH Round #17 描述 L公司和H公司举办了一次联谊晚会.晚会上,L公司的N位员工和H公司的M位员工打算进行一场交际舞.在这些领导中,一些L公司的员工和H公司的员工之间是互相认识的 ...
- 正泰电力携手图扑：VR 变电站事故追忆反演
VR(Virtual Reality,虚拟现实)技术作为近年来快速发展的一项新技术,具有广泛的应用前景,支持融合人工智能.机器学习.大数据等技术,实现更加智能化.个性化的应用.在电力能源领域,VR 技 ...
- 2019 篇 - 分享数百个 HT的工业互联网 2D 3D 可视化应用案例
继<分享数百个 HT 工业互联网 2D 3D 可视化应用案例>2018 篇,图扑软件定义 2018 为国内工业互联网可视化的元年后,2019 年里我们与各行业客户进行了更深度合作,拓展了H ...
- 分享10个高级sql写法
本文主要介绍博主在以往开发过程中,对于不同业务所对应的 sql 写法进行归纳总结而来.进而分享给大家. 本文所讲述 sql 语法都是基于 MySql 8.0+ 博主github地址:http://gi ...
- 设备共享分配：虚拟化和 SRIOV
SRIOV 简介 OpenStack 自 Juno 版本开始引入 SRIOV,SRIOV(Single Root I/O Virtualization) 是将 PCIe(PCI) 设备虚拟化成虚拟 P ...