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. Nginx在windows下常用命令

    cmd 进入Nginx解压目录 执行以下命令 start nginx : 启动nginx服务 nginx -s reload :修改配置后重新加载生效 nginx -s reopen :重新打开日志文 ...

  2. 火山引擎 DataLeap 构建Data Catalog系统的实践（一）：背景与调研思路

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 摘要 Data Catalog 产品,通过汇总技术和业务元数据,解决大数据生产者组织梳理数据.数据消费者找数和理解 ...

  3. WPF 对Border 边框进行投影

    画一个 Border 对边框进行投影 <Window x:Class="WpfApp1.MainWindow" xmlns="http://schemas.micr ...

  4. wkhtmltopdf 代替 itext 将 url 转成 pdf

    通过 itextpdf 的 HtmlConverter.convertToPdf(); 方法生成的pdf 有点让人失望,CSS啥的不起作用了,(有可能我用得不对) 后来用 wkhtmltopdf.ex ...

  5. SpringBoot 引用仓库中没有 第三方包 - 将jar 包安装本地 maven

    命令如下: mvn install:install-file -Dfile="D:\Projects\lib\com.ibm.mq-7.0.1.3.jar" -DgroupId=c ...

  6. Error unprotecting the session cookie.The payload was invalid.

    .Net Core 3.0 warn: Microsoft.AspNetCore.Session.SessionMiddleware[7] Error unprotecting the session ...

  7. 发布会回放｜Gradio 4.0 正式发布！

    Gradio 的目标是使机器学习模型的演示更容易定制和访问,以满足不同用户的需求.在 4.0 正式版的发布活动上,Hugging Face 的 Gradio 团队介绍了自己为了提高机器学习模型的可访问 ...

  8. Educational Codeforces Round 98 (Rated for Div. 2) （A - E题题解）

    呼,熬过一场考试,补下题吧 A. Robot Program 在一个二维无限方格中,初始时你在格子里,每秒你有5种决策:选择移动到上下左右四个格子中的一个或者停留在原地.你不能连续两秒做相同的决策,问 ...

  9. 写SAE评测，获 Airpods 2大奖【集结令】！

    Serverless 应用引擎 SAE 开启测评有奖!名额有限,先到先得! Serverless应用引擎SAE是一款极简易用.自适应弹性的容器化应用平台.现面向所有用户发出诚挚邀请,参与一分钟部署在线 ...

  10. <vue 基础知识 6、条件判断标签v-if>

    代码结构 一.     01-v-if用法 1.效果 根据分数的不同展现不同的汉字 2.代码 01-v-if用法.html <!DOCTYPE html> <html lang=&q ...