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基本使用的更多相关文章

  1. JVM基础系列第11讲：JVM参数之堆栈空间配置

    JVM 中最重要的一部分就是堆空间了,基本上大多数的线上 JVM 问题都是因为堆空间造成的 OutOfMemoryError.因此掌握 JVM 关于堆空间的参数配置对于排查线上问题非常重要. tips ...

  2. Vue基础系列（三）——Vue模板中的数据绑定语法

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  3. Vue基础系列（二）——Vue中的methods属性

      写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...

  4. Vue基础系列（四）——Vue中的指令（上）

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  5. Vue基础系列（五）——Vue中的指令（中）

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  6. Java基础系列（11）- 变量、常量、作用域以及变量的命名规范

    变量 变量是什么:就是可以变化的量 Java是一种强类型语言,每个变量都必须声明其类型 Java变量是程序中最基本的存储单元,其要素包括变量名,变量类型和作用域 type varName [=valu ...

  7. JVM基础系列第13讲：JVM参数之追踪类信息

    我们都知道 JVM 在启动的时候会去加载类信息,那么我们怎么得知他加载了哪些类,又卸载了哪些类呢?我们这一节就来介绍四个 JVM 参数,使用它们我们就可以清晰地知道 JVM 的类加载信息. 为了方便演 ...

  8. JVM基础系列第10讲：垃圾回收的几种类型

    我们经常会听到许多垃圾回收的术语,例如:Minor GC.Major GC.Young GC.Old GC.Full GC.Stop-The-World 等.但这些 GC 术语到底指的是什么,它们之间 ...

  9. JVM基础系列第9讲：JVM垃圾回收器

    前面文章中,我们介绍了 Java 虚拟机的内存结构,Java 虚拟机的垃圾回收机制,那么这篇文章我们说说具体执行垃圾回收的垃圾回收器. 总的来说,Java 虚拟机的垃圾回收器可以分为四大类别:串行回收 ...

  10. JVM基础系列第8讲：JVM 垃圾回收机制

    在第 6 讲中我们说到 Java 虚拟机的内存结构,提到了这部分的规范其实是由<Java 虚拟机规范>指定的,每个 Java 虚拟机可能都有不同的实现.其实涉及到 Java 虚拟机的内存, ...

随机推荐

  1. 记一次go应用在k8s pod已用内存告警不准确分析

    版权说明: 本文章版权归本人及博客园共同所有,转载请在文章前标明原文出处( https://www.cnblogs.com/mikevictor07/p/17968696.html ),以下内容为个人 ...

  2. Vue2--入门学习

    看了慕课网的教学视频,觉得挺不错的,在此做个随堂记录,有兴趣的可以去看视频 vue版本:2.5 文档链接:https://v2.cn.vuejs.org/v2/guide/installation.h ...

  3. 工程开发 | CMake工程目录结构和多线程

    CMake工程目录结构 lib: 生成的库文件 src: 源文件(.cpp .cc) include: 头文件(.h .hpp) build: 一般在这个文件夹下执行cmake ..(..之前有一个空 ...

  4. 活动回顾｜阿里云 Serverless 技术实战与创新成都站回放&PPT下载

    7月29日"阿里云 Serverless 技术实战与创新"成都站圆满落幕.活动受众以关注 Serverless 技术的开发者.企业决策人.云原生领域创业者为主,活动形式为演讲.动手 ...

  5. vue学习笔记 十三、路由介绍

    系列导航 vue学习笔记 一.环境搭建 vue学习笔记 二.环境搭建+项目创建 vue学习笔记 三.文件和目录结构 vue学习笔记 四.定义组件(组件基本结构) vue学习笔记 五.创建子组件实例 v ...

  6. S3C2440移植uboot之支持烧写yaffs映像及制作补丁

      上一节S3C2440移植uboot之裁剪和修改默认参数裁剪了uboot,修改了默认的参数,这一节开始制作yaffs映像以及补丁文件 目录 烧写文件系统 分析源码 烧写yaffs试验 使用part制 ...

  7. MINGW64 禁用 Bash 路径参数转换

    MINGW64 可以让 Windows 无缝使用 Linux 命令,但是路径参数会被转换为 Windows 风格.例如: $ ./adb shell ls /system ls: C:/Program ...

  8. 操作系统OS学习总结

    操作系统OS笔记 操作系统概述 操作系统定义 操作系统,是计算机系统中最基本.最重要的系统软件,是其它软件的支撑.控制和管理计算机系统的硬件和软件资源,合理的组织计算机工作流程,并为用户使用计算机提供 ...

  9. Https 原理与工作流程及证书链校验

    本文为博主原创,未经允许不得转载: 目录 HTTP传输三大风险 安全通信原则 HTTPS定义 TLS/SSL 协议及加密算法 HTTPS工作流程 HTTPS协议和HTTP协议的区别 CA机构 证书链校 ...

  10. 最近遇到的问题记录：UrlEncode、UrlDecode

    本文阅读前了解知识:什么时候需要使用UrlEncode和UrlDecode函数 作者使用谷歌浏览器,通过按下F12对第三方网站http协议的接口抓包进行分析操作. 场景 运维小哥哥偶尔使用某某外包公司 ...