<!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. Mongodb3.X版本的 的用户认证

    一直使用公司的mongodb环境,本地的mongodb没有开启认证,为了环境更一致,决定加上本地mongodb的认证,不过在这个过程中发生了点波折. 我使用的是window版本的3.2,公司使用的是2 ...

  2. SQLAlchemy中scoped_session实现线程安全

    不多说,先上代码 from sqlalchemy.orm import sessionmaker from sqlalchemy import create_engine from sqlalchem ...

  3. SQL Server 不同网段IP通过名称访问

    1, 设置订阅服务器C:\Windows\System32\drivers\etc目录的host文件,添加分发服务器(我的环境是发布服务器与分发服务器 是一起的,所以这里指定的是发布服务器的地址)信息 ...

  4. PHP获得真实客户端的真实IP REMOTE_ADDR，HTTP_CLIENT_IP，HTTP_X_FORWARDED_FOR

    REMOTE_ADDR 是你的客户端跟你的服务器“握手”时候的IP.如果使用了“匿名代理”,REMOTE_ADDR将显示代理服务器的IP. HTTP_CLIENT_IP 是代理服务器发送的HTTP头. ...

  5. 解读webpack的bundle.js

    可能就是好奇心略重了,读了一下webpack打包后的bundle.js的代码,复杂的模块可能读不懂,但简单的hello world模块我还是能看懂的.没什么目的,就是想通过几个简单的模块,一条简单的w ...

  6. Django之logging日志使用

    Logger模块 是python中用于便捷记录日志且线程安全的模块 使用logging模块记录日志涉及四个主要类: logger提供了应用程序可以直接使用的接口: handler将(logger创建的 ...

  7. wordpress的安装及使用

    1.如何查看别人的wordpress站点所有的模板 2.如何使用自定义的模板

  8. Java之父及Java诞生

    来自为知笔记(Wiz)

  9. SpringData_JpaRepository接口

    该接口提供了JPA的相关功能 List<T> findAll(); //查找所有实体 List<T> findAll(Sort sort); //排序.查找所有实体 List& ...

  10. cocos代码研究（24）Widget子类PageView学习笔记

    理论基础 PageView类又称Layout的管理器,可以让用户在多个Layout之间左右或者上下切换显示,继承自 Layout . 代码实践 static PageView * create ()创 ...