<!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. Typed Arrays in javascripts

    Typed Arrays(类型数组)这个概念,可能对很多人来说非常陌生,那么它是什么,又有什么用途呢? 之前的问题 Web应用程序变得越来越强大,例如新增了音视频处理.WebSocket等多个功能特性 ...

  2. 用 chown 和 chmod 修改目录所属用户及权限

    1.修改 tmp 目录所属用户为 root,用户组为 root chown -R root:root /tmp12.修改 tmp 目录为可写权限 chmod -R 777 /tmp

  3. redis知识总汇

    redis基础 django-redis redis数据操作详解 redis持久化

  4. android读取通讯录和使用系统通讯录

    第一步:注册权限 <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <us ...

  5. 需求:过滤下面这个网页里共723行 校对中里 行数为两位数的 行 并设置sz和rz在Windows和Linux之间发送和接收文件不用搭FTP

    需求:过滤下面这个网页里共723行 校对中里 行数为两位数的 行 并设置sz和rz在Windows和Linux之间发送和接收文件不用搭FTP 需求:过滤下面这个网页里共723行 校对中里 行数为两位数 ...

  6. VS2010/MFC编程入门之十六(对话框:消息对话框)

    前面几节鸡啄米讲了属性页对话框,我们可以根据所讲内容方便的建立自己的属性页对话框.本节讲解Windows系统中最常用最简单的一类对话框--消息对话框. 我们在使用Windows系统的过程中经常会见到消 ...

  7. hdu5021 树状数组+二分

    这 题 说 的 是 给 了 一 个 K—NN    每次查询离loc 最近的k个数 然后将这k个数的权值加起来除以k 赋值给 loc 这个位置上的 权值  我说说 我的做法 假如 查询的是loc 这个 ...

  8. Java学习笔记之MyEclipse 2017 CI 7、CI 8、CI 9和CI 10的安装与激活

    0x00 前言 本文介绍MyEclipse 2017 CI 7.CI 8.CI 9和CI 10的安装与激活. 重要提示:此方法理论上应该能激活MyEclipse 2017 CI所有系列,即激活方法是通 ...

  9. SQL优化之limit 1

    在某些情况下,如果明知道查询结果只有一个,SQL语句中使用LIMIT 1会提高查询效率.  例如下面的用户表(主键id,邮箱,密码): create table t_user( id int prim ...

  10. 20145105 《Java程序设计》第1周学习总结

    20145105 <Java程序设计>第1周学习总结 教材学习内容总结 学习了教材的第一章后,我初步了解了Java的发展历程,以及什么是JCP,JSR,JVM.JCP是一个开放性国际组织, ...