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 ...
随机推荐
- Django1.7+JQuery+Ajax集成小例子
Ajax的出现让Web展现了更新的活力,基本所有的语言,都动态支持Ajax与起服务端进行通信,并在页面实现无刷新动态交互. 下面是散仙使用Django+Jquery+Ajax的方式来模拟实现了一个验证 ...
- Ubuntu16.04 apache2 wsgi 部署django
在Ubuntu16.04上部署django其实还算简单直观,最重要的问题就是路径设置正确,并且保证版本统一,这个测试是在 Apache/2.4.18 (Ubuntu) apt-get install ...
- Junit3断言
在Robotium自动化测试的过程中,发现没有断言的脚本是没有意义的,现整理Junit3和Junit4的断言,供日后查阅. http://junit.org/ Junit3断言API: http:// ...
- Struts2从一个action转到另一个action的两种方法
在Struts2中,Action处理完用户请求后,将会返回一个字符串对象,这个字符串对象就是一个逻辑视图名.Struts 2通过配置逻辑视图名和物理视图之间的映射关系,一旦系统收到Action返回的某 ...
- jfinal相关
1:jfinal工具类 1):密码加密工具 HashKit.md5(String password);2):数据缓存工具类 chacheKit3):获取项目路径工具类: PathKit 4):读取文件 ...
- PriorityQueue优先队列用法入门
PriorityQueue是队列的一种,它叫做优先队列,该类实现了Queue接口. 之所以叫做优先队列,是因为PriorityQueue实现了Comparator这个比较接口,也就是PriorityQ ...
- NPM 相关
1. 官方网站 https://docs.npmjs.com/ 2. 显示Global Module安装过什么 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font ...
- 泛型（Generic）
本质:限制集合类型 我们在编写泛化类的时候,我们要时刻提醒自己,我们传入的参数T仅仅是一个Object类型,任何具体类型信息我们都是未知的. 小例子: package day02.generic; i ...
- Android之动画的学习（转载）
Android动画学习笔记-Android Animation 3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中 ...
- SQL Server 【附】创建"商品管理数据库"、"学生选课数据库"的SQL语句
附:(创建“商品管理数据库”的SQL语句) --建立"商品管理数据库"数据库-- create database 商品管理数据库 on(name='商品管理数据库_m', file ...