vue路由的简单实例
vue2.0 和 vue1.0 路由的语法还是有点稍微的差别,下面介绍一下vue-router 2的简单实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
</head>
<body>
<div id="app">
<div>
<!-- 4、<router-link>默认会被渲染成一个 `<a>` 标签 ,to指令跳转到指定路径 -->
<router-link to="/home">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
</div> <!-- 5、在页面上使用<router-view></router-view>标签,用于渲染匹配的组件 -->
<router-view></router-view>
</div> <!-- 0、引入依赖库 -->
<script src="../js/vue.min.js"></script>
<script src="../js/vue-router.min.js"></script> <script type="text/javascript">
/* 1、创建组件 */
const Home = Vue.extend({
template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
data: function() {
return {
msg: 'Hello, vue router!'
}
}
});
const About = Vue.extend({
template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
}); // 2. 创建 router 实例,然后传 `routes`路由映射 配置
const router = new VueRouter({
routes: [
{ path: '/home', component: Home },
{ path: '/about', component: About },
{ path: '/', component: Home } //设置默认路径
]
}); // 3. 创建和挂载根实例。记得要通过 router 配置参数注入路由,从而让整个应用都有路由功能
const vm = new Vue({
router: router
}).$mount('#app'); // 现在,应用已经启动了!
</script>
</body>
</html>
运行结果如下:
点击不同的链接,切换到不同组件,显示组件的相应内容
更多vue-router 2 的使用方法,请单击这里
vue路由的简单实例的更多相关文章
- Vue 路由的简单使用(命名路由、query路由传参、params路由传参)
1 # Vue 路由 2 # 1.理解:一个路由(toute)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理 3 # 2.前端路由:key是路径,value是组件 ...
- vue.js路由参数简单实例讲解------简单易懂
vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们 ...
- vue - 简单实例(vue-router + webpack + vuex)
分享 + 实践 基于公司部分产品技术栈转型使用vue,部分同事需要学习一下,快速上手,那么我很荣幸的成为了给大家分享vue技术栈的‘ ’导师‘,在这里我分享一下: 讲解大纲为:(我是有一份PPT的, ...
- 10.3 Vue 路由系统
Vue 路由系统 简单示例 main.js import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...
- vue.js+webpack在一个简单实例中的使用过程demo
这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...
- Vue.js—组件快速入门及Vue路由实例应用
上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...
- 简单实例一步一步帮你搞清楚MVC3中的路由以及区域
我们都知道MVC 3 程序的所有请求都是先经过路由解析然后分配到特定的Controller 以及 Action 中的,为什么这些知识讲完了Controller Action Model 后再讲呢?这个 ...
- vue.js最最最最简单实例
vue.js最最最最简单实例 一.总结 一句话总结: 1.vue.js实现实现数据的双向绑定用的是什么标记? 双大括号:比如{{message}} 2.vue数据循环输出的标记是什么? 用的是标签的v ...
- 简单配置Vue路由
简单配置Vue路由 1. 创建一个单文件组件Test.vue <template> <div>Test</div> </template> <s ...
随机推荐
- leetcode-【简单题】Happy Number
题目: Write an algorithm to determine if a number is "happy". A happy number is a number def ...
- Oracle11g导出空表
# Oracle11g导出空表 <!-- create time: 2015-06-01 23:35:24 --> ###原因 11G中有个新特性,当表无数据时,不分配`segment`, ...
- (分享)FreeVideo1.6.1 VIP视频播放器(支持下载)
软件名字:FreeVideo 版 本 号 :v 1.6.1 开发语言:易语言 压缩加壳:VMP 3.0 beta 皮 肤:易简约定制版(白色) 模块使用:乐易.精易.皮肤 主要技术:其实没啥 ...
- tcp协议头窗口,滑动窗口,流控制,拥塞控制关系
参考文章 TCP 的那些事儿(下) http://coolshell.cn/articles/11609.html tcp/ip详解--拥塞控制 & 慢启动 快恢复 拥塞避免 http://b ...
- 关于GPL的一些知识
1.什么是GPL GPL许可协议(GNU General Public License):只要软件中包含有其他GPL协议的产品或代码,那么该软件就必须也采用GPL许可协议且开源及免费.具有以下特点: ...
- java后台如何获取String 类型 json里的字段值
首先把获取到的数据转为json String sbody=Json.getGson().toJson(resp.getResponseBody()); Huanxin 这个类是 json数据对应字段的 ...
- andriod前端传来经度 纬度 坐标 来查询数据库坐标周围500M内的类数据
@Transient public static List<Article> queryByPosition(PositionInfo pinfo){ //System.out.print ...
- 《CoffeeScript应用开发》学习:第二章 编写第一个CoffeeScript应用程序
CoffeeScript基础 语句 CoffeeScript没有分号,语句由新的一行结束,但是可以使用\将语句延续至下一行. 有时可以跨行实现函数调用: "foo". .conca ...
- Android 之Html的解析(使用jsoup)
Runnable run=new Runnable() { @Override public void run() { // TODO Auto-generated method stub useri ...
- Badboy使用数据源Excel进行脚本参数化
1.首先新建一个Excel,这里示例我写得非常简单,由两由数据组成,第一行为表头.见下图: 2.录制脚本,见上一篇,录制一个非常简单的搜狗查询 3.添加数据源,在Tools面板中找到Data Sour ...