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. 分享个本地maven配置

    用阿里云的快有点受不了了,经常有包下载不了 settings.xml <settings xmlns="http://maven.apache.org/SETTINGS/1.0.0&q ...

  2. print('Hello World!')的新玩法

    相信很多同学入门Python的第一行代码都是print('Hello World!') print是初学者最先接触的Python函数,但是很多人可能到现在也不完全清楚它的用法. print(*obje ...

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

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

  4. Codeforces Round #629 (Div. 3) & 19级暑假第六场训练赛

    A:Codeforces 1328A Divisibility Problem 整除+模 Input 5 10 4 13 9 100 13 123 456 92 46 Output 2 5 4 333 ...

  5. Zookeeper(3)---java客户端的使用

    前面介绍了zk指令的使用,这里说一下java客户端中怎么使用这些指令 <dependency> <groupId>org.apache.zookeeper</groupI ...

  6. js判断undefined

    if (item2.shifoushiyong === 1) { if( typeof(item2.koufen) == "undefined" ) { item2.koufen ...

  7. 每天学五分钟 Liunx 011 | sudo

    回顾前两节,在 001 中介绍了怎么添加用户及用户组,在 010 中介绍了从 client 端 ssh 到 server 的详细过程,那么接下来要介绍的就是是登陆到 server 之后如何切换用户了. ...

  8. Python定位错误：段错误 (核心已转储)

    技术背景 在各种编程语言中都有可能会遇到这样一个报错:"段错误 (核心已转储)".显然是编写代码的过程中有哪里出现了问题,但是这个报错除了这几个字以外没有任何的信息,我们甚至不知道 ...

  9. Ubuntu Linux下的PDF阅读器推荐——Okular

    安装方法 在Ubuntu下直接使用sudo apt-get install okular即可,如果中间遇到依赖项的问题,可以通过运行sudo apt --fix-broken install来自动修复 ...

  10. SV Interface and Program 2

    Clocking:激励的时序 memory检测start信号,当start上升沿的时候,如果write信号拉高之后,将data存储到mem中 start\write\addr\data - 四个信号是 ...