<!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. 【Jenkins学习 】解决jenkins运行磁盘满的问题

    一.背景 今天有同事编译Jenkins的相关Jobs的时候,出现了编译成功,但是输出产物失败的情况,如下图所示: Caused by:java.io.IOException: No space lef ...

  2. ftp文件上传和下载

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.N ...

  3. easyUI datagrid 清空

    最近在做一个管理系统,出于一些需要,经常要将一些datagrid清空.然后easyUI本身并没有自带的方法,然后自己动手丰衣足食吧. 清空无外乎两种思路,删除现有数据和填充空数据. 1.删除数据 va ...

  4. HDU1452:Happy 2004(求因子和+分解质因子+逆元）上一题的简单版

    题目链接:传送门 题目要求:求S(2004^x)%29. 题目解析:因子和函数为乘性函数,所以首先质因子分解s(2004^x)=s(2^2*x)*s(3^x)*s(167^x); 因为2与29,166 ...

  5. Maven– HelloWorld实例

    Maven– HelloWorld实例 maven安装好后,可以通过HelloWorld项目来体验一下maven是如何构建项目的.Maven项目的核心是pom.xml(就像Ant的build.xml一 ...

  6. java线程初写，陆续更新中。。

    (1)什么是线程?线程,是程序执行流的最小单元.线程是进程中的一个实体,是被系统独立调度和分派的基本单位,线程自己不拥有系统资源,只拥有一点儿在运行中必不可少的资源,但它可与同属一个进程的其它线程共享 ...

  7. hdu5107 线段树

    hdu 5107 这题说的是给了一个二维的 平面, 平面内有30000个点每个点都有自己的高度,然后又30000次的查询,每次查询给的是(X,Y,K), 要求出set(x,y){x,y|x<=X ...

  8. uva1452

    这题说的是给了一个序列1到n然后你从1 位置开始数k个删除,直到最后每个数都被删除了.我们考虑1个数在被删除前后的位置,比如现在在i位置那么 回到删除当前的最后一个是 (i+k)L 了为删除前 的 个 ...

  9. router基本使用

    摘自:https://blog.csdn.net/qq_39894133/article/details/78992923 1.vue2 路由的使用流程: 1.vue2中的路由定义层:<rout ...

  10. awk处理excel表格数据

    拿到一个ip的excel表格,要对单元格中的ip进行扫描,一看有点乱,有空格分割的,有"/"分割的,有带括号(分割的,有好几百个: 要把左边的变为右边的格式,用excel自带的功能 ...