<!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. Object类中常见的方法，为什么wait notify会放在Object里边

    toString():输出一个对象的地址字符串(哈希code码):可以通过重写toString方法,获取对象的属性! equals():比较的是对象的引用是否指向同一块内存地址, 重写equals() ...

  2. ios 开发failed to chmod

    当XCode遇到此问题的时候,可通过重启模拟器和XCode来解决 http://www.jianshu.com/p/f8e7c5949660 合并分支, xcode报错  couldn't load ...

  3. 106 miles to Chicago---zoj2797（最短路问题，求概率，模板）

    题目链接:http://www.icpc.moe/onlinejudge/showProblem.do?problemId=1797 题意是有 n 个点 m 条边,从a到b的不被抓的概率是p,让求从点 ...

  4. 爬虫Scrapy框架

    安装scrapy 在安装过程中报错:解决方案 通过在https://www.lfd.uci.edu/~gohlke/pythonlibs/#twisted,然后下载: CP后是python 版本,32 ...

  5. uchome 常用函数示例

    一.inserttable //添加数据 //前3个参数 $tablename插入的表名称 $insertsqlarr数据数组 $returnid是否返回插入ID function inserttab ...

  6. （4.20）sql server性能指标、性能计数器

    (4.20)sql server性能指标.性能计数器 常规计数器 收集操作系统服务器的服务器性能信息,包括Processor.磁盘.网络.内存 Processor 处理器 1.1 % Processo ...

  7. python 面向对象 私有属性

    __init__构造函数 self.name = name # 属性, 实例变量,成员变量,字段 def sayhi()# 方法, 动态属性 私有属性不对外看到 前面加上__ class role() ...

  8. centos7 安装python3.6 及模块安装演示

    目录: 下载python3.6 安装python3.6的依赖 编译安装 更改链接 更改yum脚本的python依赖 修改gnome-weaktool配置文件 修改urlgrabber配置文件 1.下载 ...

  9. Flask系列(五)Flask实现分页

    一.flask分页组件 from urllib.parse import urlencode,quote,unquote class Pagination(object): ""& ...

  10. PAT 1132 Cut Integer[简单]

    1132 Cut Integer(20 分) Cutting an integer means to cut a K digits lone integer Z into two integers o ...