<!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. 转！idea启动后发现tomcat前面出现红色或是灰色的问号

    原博文地址:https://blog.csdn.net/z_zhy/article/details/83068168 直接在idea里 点击File------settings,在搜索框直接搜tomc ...

  2. python控制台输出颜色

    python_控制台输出带颜色的文字方法在开发项目过程中,为了方便调试代码,经常会向stdout中输出一些日志,默认的这些日志就直接显示在了终端中.而一般的应用服务器,第三方库,甚至服务器的一些通告也 ...

  3. mysql 数据操作 多表查询 准备

    为什么需要多表查询: 因为我们不可能把所有数据都放在一张表里 我们把不同数据存储 放在一张一张不同表 方便管理,但我们为了方便管理,把数据拆分到一张一张表去存储. 但是数据还是一个整体,数据之间是有关 ...

  4. MySQL中数据表的查操作

    查询数据表的全部内容 mysql> show tables;#查看当前数据库下的全部表 +--------------------+ | Tables_in_ceshi_ku | +------ ...

  5. centos 文档的压缩和打包 gzip,bzip2,xz,zip,unzip,tar,tgz 第九节课

    centos  文档的压缩和打包   gzip,bzip2,xz,zip,unzip,tar,tgz  第九节课 SAS盘可以支持热插拔,看机器 tar.zip.tar -czvf 不会动源文件,gz ...

  6. OPENSSL编程 (secure shell, ssh)

    很好的 OPENSSL编程 教程,名字就叫“OPENSSL编程” 它里面还有很多关于密码学的东西. http://www.pengshuo.me http://www.pengshuo.me/2014 ...

  7. cocos代码研究（12）UI之Widget学习笔记

    理论基础 Widget类,所有UI控件的基类. 这类继承自ProtectedNode和LayoutParameterProtocol. 如果你想实现自己的UI控件,你应该继承这个类. 被 VideoP ...

  8. 72. Edit Distance(编辑距离 动态规划)

    Given two words word1 and word2, find the minimum number of operations required to convert word1 to  ...

  9. uva11020 set

    有n个人,每个人有两个属性x,y.如果对于一个人P(x,y) 不存在另外一个人(x',y') 使得x'<x,y'<=y 或者 x'<=x,y'<y 我们说p是有优势的,每次给出 ...

  10. Git: A分支上的commit提交到B分支上

    1. 执行git log -3 --graph A,查看A分支下的commit: 注:commit 后面的hash值代表某个commit,这里把”82f1fb7138c5860cc775b4b5ea7 ...