Vue.js第二天学习笔记(vue-router)


Posted in Javascript onDecember 01, 2016

vue中vue-router的使用:

Vue.js第二天学习笔记(vue-router)

Vue.js第二天学习笔记(vue-router)

Vue.js第二天学习笔记(vue-router)

main.js如何配置(es6的写法):在引用之前记得先   npm 下所需要的vue

import Vue from 'vue'
import App from './App.vue'
import Router from 'vue-router'
import Resource from 'vue-resource'
//import VueTouch from 'vue-touch'
var VueTouch = require('vue-touch')

//引入home页面
import homepage from './page/home.vue'
//引入test页面
import test from './page/test.vue'

Vue.use(Router);
Vue.use(Resource);
Vue.use(VueTouch);

var router = new Router({
 abstract: true,
 hashbang: false
});
//实现页面跳转
router.map({
 '/home':{
 component:homepage
 }, 
 '/test':{
 component:test
 }, 
 
})

router.start(App, '#app')
// router.go('test'); 默认直接跳转到 test 页面

index.html中引入app.vue和build.js

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>vue.js学习笔记(2)</title>
 <link rel="stylesheet" type="text/css" href="style/bootstrap.css">
</head>
<body>
 <!--此处注意加载顺序,需要先加载dom在加载js,否则会'Cannot find element: #app'-->
 <div id='app'></div>
 <script src="static/build.js"></script>
</body>
</html>
<style>
body {
}
</style>

app.vue引入router

<template>
<div class='all-container'>
 <div class="public-content">我是公共页面</div>
 <div class='menu'>
 <ul class="list">
 <li><a v-link='"/home"'>home页面</a></li>
 <li><a v-link='"/test"'>test页面</a></li>
 </ul>
 </div>
 <router-view transition='animation' class='container' keep-alive></router-view>
</div>
</template>

home.vue

<template>
<div class="home">
 <div class="htmleaf-content">
 我是home页面的内容
 </div>
</div>
</template>

test.vue

<template>
<div class="test">
 <div class="test-content">
我是test页面的内容
</div>
</div>

</template>

 最后用webpack 将程序打包.关于webpack大家可以看看

Vue.js——60分钟webpack项目模板快速入门

webpack主页

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何使用jQuery来处理图片坏链具体实现步骤
May 02 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
Angular通过指令动态添加组件问题
Jul 09 Javascript
详解原生JS动态添加和删除类
Mar 26 Javascript
Vue 实现前端权限控制的示例代码
Jul 09 Javascript
google广告之另类js调用实现代码
Aug 22 Javascript
javascript中layim之查找好友查找群组
Feb 06 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 #Javascript
Vue方法与事件处理器详解
Dec 01 #Javascript
简单理解vue中实例属性vm.$els
Dec 01 #Javascript
jsp 自动编译机制详细介绍
Dec 01 #Javascript
基于vue.js实现图片轮播效果
Dec 01 #Javascript
JQuery学习总结【一】
Dec 01 #Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 #Javascript
You might like
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
关于页面优化和伪静态
2009/10/11 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
php curl模拟post提交数据示例
2013/12/31 PHP
php中的strpos使用示例
2014/02/27 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
php 伪静态之IIS篇
2014/06/02 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
判断滚动条到底部的JS代码
2013/11/04 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
js实现无缝滚动图
2017/02/22 Javascript
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
详解Python3.1版本带来的核心变化
2015/04/07 Python
你应该知道的python列表去重方法
2017/01/17 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
Python模块future用法原理详解
2020/01/20 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
文体活动总结范文
2014/05/05 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
测量员岗位职责
2015/02/14 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
校运会班级霸气口号
2015/12/24 职场文书