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. 【教程】React Native 应用中的代码混淆与安全性管理

    ​ 混淆是指对源代码进行加密.重命名等操作,以增加代码的复杂度,使其难以理解和反编译. 在React Native中,混淆可以通过以下步骤实现: 1. 将JavaScript源代码转换为基于本机平台的 ...

  2. 企业新道路怎么走？火山引擎AB测试助力决策选择

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群   乐刻是一家创立8年的企业,除了消费者熟悉的乐刻健身房可办月卡.24小时营业等,其还有比外界了解更多元的业务.目 ...

  3. flask 上传文件，视图

    记得有template ''' 导入flask类.该类的实例将会成为我们的wsgi应用 __name__是一个适用于大多数情况的快捷方式,有了这个参数,flask才能知道在那里找到模板和静态文件等东西 ...

  4. Goolge Kick Start Round A 2020 （A ~ D题题解）

    比赛链接:kick start Round A 2020 A. Allocation 题目链接 题意 给出 \(N\) 栋房子的价格,第 \(i\) 栋房子的价格为 \(A_i\),你有 \(B\) ...

  5. 2D 可视赋能智慧水务绿色集约化发展

    前言 随着国家对环境保护治理程度的日益重视,各地政府积极响应国家政策,在共同聚焦生态文明建设下,急速催生了水务行业数字化转型.如今 "供排污"一体化管理系统成为行业发展的重要趋势, ...

  6. 又一创新！阿里云 Serverless 调度论文被云计算顶会 ACM SoCC 收录

    近日,阿里云函数计算产品团队撰写的关于 Serverless 调度的创新性论文,被云计算领域 ACM SoCC 国际会议长文录用. 去年阿里云函数计算团队首个提出在 FaaS 场景下的去中心化快速镜像 ...

  7. rem布局，使用手机端，pc大屏——亲测好用

    1 var docEl = document.documentElement, 2 //当设备的方向变化(设备横向持或纵向持)此事件被触发.绑定此事件时, 3 //注意现在当浏览器不支持orienta ...

  8. KVM 核心功能：内存虚拟化

    1 内存虚拟化简介 QEMU-KVM 提供内存的虚拟化,从虚拟机角度看其自身拥有的内存就是真实的物理内存.实际上,虚拟机是 host 上的一个 qemu 进程,在为虚拟机指定内存时,host 上并没有 ...

  9. 本地打包编译jdk版本问题

    一.遇到的问题 进行项目接入pinpoint-ice插件,启动项目时pinpoint-agent日志报如下不支持jdk8的错误.'   二.排查 我们是在个人笔记本电脑上windows环境下通过mav ...

  10. 【MicroPython】用 c 添加接口 -- 添加 type

    [来源]https://www.eemaker.com/micropython-type.html