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. 📝 App备案与iOS云管理式证书 ，公钥及证书SHA-1指纹的获取方法

    ​ 引言 在iOS应用程序开发过程中,进行App备案并获取公钥及证书SHA-1指纹是至关重要的步骤.本文将介绍如何通过appuploader工具获取iOS云管理式证书 Distribution Man ...

  2. 从应用看火山引擎 AB 测试 (DataTester) 的最佳实践

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 本文将从外部用户的角度介绍 A/B 测试平台的最佳实践.分享分为四部分,首先整体介绍 A/B 测试的应用场景,接下 ...

  3. 7z压缩测试

    注意: CompressionLevel 选择

  4. JAVA CRC16

    JAVA CRC16 /** * CRC-16 * * <table width="400px" border="1" cellpadding=" ...

  5. 2023年Pycharm下载安装教程，亲测可用，持续更新

    目录 一.pycharm安装教程 二.推荐阅读 一.pycharm安装教程 1.进入官网下载pycharm 官网下载地址:https://www.jetbrains.com/pycharm/downl ...

  6. 解决Github中使用Octotree时，出现 Error: API limit exceeded 报错 或者 Error: Connection error报错的问题（详细操作）

    对于科研工作者来说,Github 是不可多得的利器,那么Octotree 插件的使用将会让用户在使用 Github 时拥有更好的体验,提高学习工作的效率.但是笔者在使用的过程中遇到以下这样的问题,下面 ...

  7. 题解 [HDU6746] Civilization(贪心+模拟)

    来源:2020 年百度之星·程序设计大赛 - 初赛一 一道贪心 + 细节模拟题 题意很简单,这里不详细写了 观察题目,\(n\) 只有 500 ,可以 \(n \times n\) 枚举每个位置作为起 ...

  8. Android 3分钟带你入门开发测试

    作者:Zhu Yifei 作为一名合格的开发人员,基本的开发测试能力必不可少,开发测试分单元测试和UI测试,通过开发测试可以减少开发人员自测时间,提升开发质量.本篇文章可以帮助初级开发人员快速了解开发 ...

  9. vue中引入其他网站页面

    https://blog.csdn.net/qq_36706878/article/details/102593309

  10. Vue2知识点简要

    一.双向绑定原理 Vue2采用的是观察者-发布订阅模式,利用Object.defineProperty实现对数据已定义属性的监控(定义观察者模式), 编译DOM时解析v-model等属性以及对inpu ...