<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>Title</title>

    <!-- Bootstrap -->

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>

    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>

</head>

<body>

<div id="box">

    <router-link to="/index">首页</router-link>

    <router-link to="/content">内容</router-link>

    <router-view></router-view>

</div>

<script type="text/javascript">

    let index = {

        template:'<h1>这是首页</h1>',

    };

    let content = {

        template:'<h1>这是内容页</h1>',

    };

    let routes = [

        {path: '/', redirect: '/index'},//定义的初始路由路径

        {path:'/index',component:index},

        {path:'/content',component:content},

    ];

    let router = new VueRouter({routes});

    var app = new Vue({

        el:'#box',

        router:router

    });

</script>

</body>

</html>

　　

vue路由初始化路转的更多相关文章

  1. 「vue基础」一篇浅显易懂的 Vue 路由使用指南（ Vue Router 上）

    大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...

  2. vue进阶：vue-router（vue路由）的安装与基本使用

    vue路由安装与基本使用 vue嵌套路由 vue动态路由(路由组件传参) vue路由重定向和一些其他的路由相关 官方手册:https://router.vuejs.org/zh/ 一.vue路由安装与 ...

  3. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

  4. 攻克vue路由

    先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...

  5. vue路由参数变化刷新数据

    当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...

  6. 后端开发者的Vue学习之路（四）

    目录 上节内容回顾: npm 介绍 安装 常用命令: 补充: 基于npm的Hello World 项目结构分析 用法迁移 小提醒 ES6语法 知识补充 单文件组件 使用注意: 路由 开启路由 定义路由 ...

  7. 3种vue路由传参的基本模式

    路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...

  8. vue 路由传参的三种基本模式

    路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...

  9. Vue 路由详解

    Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...

随机推荐

  1. ng-深度学习-课程笔记-5: 深层神经网络(Week4)

    1 深度L层神经网络( Deep L-layer Neural network ) 针对具体问题很难判断需要几层的网络,所以先试试逻辑回归是比较合理的做法,然后再试试单隐层,把隐层数量当作一个超参数, ...

  2. KVM入门

    KVM KVM(Kernel-based Virtual Machine)是众多虚拟化技术之一,它是Linux内核中的一个模块,该模块依赖于CPU,如果CPU支持虚拟化,那么该模块才可以被加载.KVM ...

  3. 怎样在linux下对U盘进行格式化和分区

    说明,为了不做无用功,首先必须卸载要分区的设备,分区才能执行成功.通过命令umount /media/?? 或者umount /mnt/??? 看你的实际情况,这一步必不可少.1.首先通过命令fdis ...

  4. Float类型出现舍入误差的原因(round 取位)

    在练习时,输入如下代码: 结果不准确. 原因:https://blog.csdn.net/bitcarmanlee/article/details/51179572 浮点数一个普遍的问题就是在计算机的 ...

  5. SQLite 自定义函数,聚合,排序规则

    SQLite 自定义函数,聚合,排序规则 1.使用自定义函数, 聚合以及排序规则的基本方法是使用回调函数.这些注册的函数的生命周期只存在于应用程序中, 并不存储在数据库文件中, 因此需要在每个连接建立 ...

  6. StringBuffer类的常用方法

    StringBuffer类和String一样,也用来代表字符串.只是由于StringBuffer的内部实现方式和String不同,所以StringBuffer在进行字符串处理时,不生成新的对象,在内存 ...

  7. 解决数据库里表字段带下划线，实体类转小驼峰，Mapper的映射问题

    mybatis中mapUnderscoreToCamelCase的使用 mybatis-config.xml配置: <?xml version="1.0" encoding= ...

  8. CodeForces 828C String Reconstruction（并查集思想）

    题意:给你n个串,给你每个串在总串中开始的每个位置,问你最小字典序总串. 思路:显然这道题有很多重复填涂的地方,那么这里的时间花费就会特别高. 我们维护一个并查集fa,用fa[i]记录从第i位置开始第 ...

  9. HDU 5934 Bomb（tarjan/SCC缩点）题解

    思路:建一个有向图,指向能引爆对象,把强连通分量缩成一点,只要点燃图中入度为0的点即可.因为入度为0没人能引爆,不为0可以由别人引爆. 思路很简单,但是早上写的一直错,改了半天了,推倒重来才过了... ...

  10. [kata]数值内3和5的倍数的总和求解

    这个题是这样的,方法参数接受一个数值,以3,5为基数,返回小于这个参数的3,5的倍数,加上3,5本身总和. 朋友段帅说头疼,估计是天气原因吧,好起来吧,还得战斗呢.