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 相关文章推荐
js验证表单大全
Nov 25 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
Feb 11 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 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截取中文字符串的问题
2006/07/12 PHP
PHP 数组教程 定义数组
2009/10/23 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
php二分查找二种实现示例
2014/03/12 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
详解jquery选择器的原理
2017/08/01 jQuery
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
JS实现小米轮播图
2020/09/21 Javascript
Python 字典(Dictionary)操作详解
2014/03/11 Python
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
Python编程中的文件操作攻略
2015/10/16 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
python随机数分布random测试
2018/08/27 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
司法建议书范文
2014/05/13 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
民主生活会主持词
2015/07/01 职场文书
特种设备安全管理制度
2015/08/06 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
PyTorch中permute的使用方法
2022/04/26 Python