<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue-router之实例讲解定义一下单页面路由：</title>

    <script src="vue.js"></script>

    <script src="vue-router.js"></script>

</head>

<body>

<div id="demo">

    <router-link to="/ltphp">LTPHP</router-link>

    <router-link to="/ltcms">LTCMS</router-link>

    <router-view></router-view>

</div>

<script>

    const ltphp={

        template:"<h1>ltphp</h1>"

    }

    const ltcms={

        template:"<h1>ltcms</h1>"

    }

    let routes=[

        {path:'/ltphp',component:ltphp},

        {path:'/ltcms',component:ltcms}

    ]

    //要把组件交给路由器：

    let router=new VueRouter({routes});

    new Vue({

        el: "#demo",

        router

    });

</script>

</body>

</html>

　　

054——VUE中vue-router之实例讲解定义一下单页面路由的更多相关文章

  1. 【面试题】Vue中的$router 和 $route的区别

    Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...

  2. vue中的$router 和 $route的区别

    最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...

  3. Vue中this.$router.push（参数） 实现页面跳转

    很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串 ...

  4. Vue中this.$router.push参数获取

    传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效.需要用name来 ...

  5. vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法

    传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用name ...

  6. Vue中this.$router.push参数获取（通过路由传参）【路由跳转的方法】

    传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用nam ...

  7. vue中的router和route有什么区别？

    我只知道前者一般用在跳转路由的时候,push一个url, 而后者则用来存储路由跳转过程中存储的各种数据. 话不多说,这篇博客讲的比较详细,可以参考一下. vue2.0中的$router 和 $rout ...

  8. vue中使用router全局守卫实现页面拦截

    一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最 ...

  9. 047——VUE中css过渡动作实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. android的一些类库的优缺点

    经过本人的面试经验,以及接触的android项目,总结了一下android的一些类库的优缺点: 一,线程方面 1.AsyncTask 首先是线程优化以及缺陷方面,针对目前大多数类库来说,都有好的设计方 ...

  2. 动态修改Python类和实例的方法（转）

    相信很多朋友在编程的时候都会想修改一下已经写好的程序行为代码,而最常见的方式就是通过子类来重写父类的一些不满足需求的方法.比如说下面这个例子. class Dog: def bark(self): p ...

  3. Java Thread 如何处理未捕获的异常？

    Java Thread是不允许异常抛出到本线程之外的,Runnable接口的public abstract void run()是不允许throws Exception的,这在编译时就通不过. 线程异 ...

  4. JAVA 对象内存结构

    JAVA对象内存结构 HotSpot虚拟机中,对象在内存中存储的布局可以分为三块区域:对象头(Header).实例数据(Instance Data)和对齐填充(Padding). 对象头 markWo ...

  5. http之状态码含义

    状态代码有三位数字组成,第一个数字定义了响应的类别,共分五种类别: 1xx:指示信息--表示请求已接收,继续处理 2xx:成功--表示请求已被成功接收.理解.接受 3xx:重定向--要完成请求必须进行 ...

  6. ng-深度学习-课程笔记-3: Python和向量化(Week2)

    1 向量化( Vectorization ) 在逻辑回归中,以计算z为例,$ z =  w^{T}+b $,你可以用for循环来实现. 但是在python中z可以调用numpy的方法,直接一句$z = ...

  7. php面向对象基础知识点总结

    下面是一些PHP面向对象基础知识的摘录,摘录内容来自PHP5.1手册. 1.类的变量成员叫做“属性”,或者叫“字段”.“特征”,在本文档统一称为“属性”. 2.属性中的变量可以初始化,但是初始化的值必 ...

  8. c++第二十七天

    p135~p140:1.位运算符.作用于整数类型的运算对象,并把运算对象看成是二进制的集合,提供检查和设置二进制位的功能. 2.bitest:一种可表示任意大小的二进制位集合的标准库类型. 3.关于符 ...

  9. zabbix server监控报主机 Lack of free swap space

    zabbix server监控报主机 Lack of free swap space,因为交换空间不足引起.该主机内存为3G,正常交换空间大小为物理内存2倍左右. #查看已有内存及交换空间 free ...

  10. 前端学习笔记之CSS浮动浅析

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...