在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
1.我想实现原生app那种点击后页面从右往左进来，点击返回后从左往右回去的效果，我想实现一个任何路由都是这样的效果，不是说单独给某个路由写一下动画，因为可能涉及到平级路由，嵌套路由之间的相互跳转，我目前是实现在平级路由的meta里面加index来代表顺序，但是觉得又不是很通用，不可能每个路由都加吧，所以求一个通用的好办法
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
加到router-view外面就好了
&transition name="yourName"&
&router-view& &/router-view&
&/transition&
中间可能会遇到白屏什么的问题，动画样式里开个绝对定位就好了。
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。11被浏览4,976分享邀请回答01 条评论分享收藏感谢收起前端路由的不同方法实现
在讲前端路由之前，先说下后端路由，以及为什么出现了前端路由。
后端路由： 在地址栏中切换不同的url时，每次都向后台服务器发出请求，服务器响应请求，在后台拼接html文件传给前端显示，java web中的就是如此实现的。常用的后台MVC模式的基本路由处理流程：浏览器输入一个url请求，从中找到Controller和Action的值，将请求传递给Controller处理，Controller获取Model数据对象，并且将Model传递给View,最后View呈现界面。
例如输入一个url：localhost/home/index
其中localhost是域名，对应结构{controller}/{action}/{id}
优点：分担了前端的压力，html和数据的拼接都是由服务器完成。
缺点：当项目十分庞大时，加大了服务器端的压力，同时在浏览器端不能输入制定的url路径进行指定模块的访问。另外一个就是如果当前网速过慢，那将会延迟页面的加载，对用户体验不是很友好。
前端路由： 随着（SPA）单页应用的不断普及，前后端开发分离，目前项目基本都使用前端路由，在项目使用期间页面不会重新加载。
优点：1、用户体验好，和后台网速没有关系，不需要每次都从服务器全部获取，界面展现快。2、可以再浏览器中输入指定想要访问的url路径地址。3.实现了前后端的分离，方便开发。有很多框架都带有路由功能模块。
缺点：1、对SEO不是很友好2、在浏览器前进和后退时候重新发送请求，没有合理缓存数据。3，初始加载时候由于加载所有模块渲染，会慢一点。
前端路由目前主要有两种方法：
1、利用url的hash,就是常用的锚点（#）操作，类似页面中点击某小图标，返回页面顶部，JS通过hashChange事件来监听url的改变，IE7及以下需要轮询进行实现。一般常用框架的路由机制都是用的这种方法，例如Angualrjs自带的ngRoute和二次开发模块ui-router，react的react-route,vue-route& 2、利用HTML5的History模式，使url看起来类似普通网站，以&/&分割，没有&#&，但页面并没有跳转，不过使用这种模式需要服务器端的支持，服务器在接收到所有的请求后，都指向同一个html文件，通过historyAPI，监听popState事件，用pushState和replaceState来实现。具体API参考MDN文档https://developer.mozilla.org&
由于使用hash方法能够兼容低版本的IE浏览器，简单的的自己搭建前端路由。
&!DOCTYPE html&
&meta charset=&utf-8&&
&meta http-equiv=&X-UA-Compatible& content=&IE=edge&&
&title&前端路由实现&/title&
&li&&a href=&#/&&&/a&&/li&
&li&&a href=&#/home&&主页&/a&&/li&
&li&&a href=&#/about&&详情页&/a&&/li&
&script type=&text/javascript& src=&router.js&&&/script&
&script type=&text/javascript&&
var content = document.querySelector('body');
Router.route('/', function() {
console.log(&这是主页&);
Router.route('/home', function() {
console.log(&这是主页&);
Router.route('/about', function() {
console.log(&这是详情页&);
//构造函数
function Router() {
this.routes = {};
this.currentUrl = '';
//route 存储路由更新时的回调到回调数组routes中，回调函数将负责对页面的更新
Router.prototype.route = function(path, callback) {
this.routes[path] = callback || function(){};//给不同的hash设置不同的回调函数
//refresh 执行当前url对应的回调函数，更新页面
Router.prototype.refresh = function() {
console.log(location.hash.slice(1));//获取到相应的hash值
this.currentUrl = location.hash.slice(1) || '/';//如果存在hash值则获取到，否则设置hash值为/
// console.log(this.currentUrl);
this.routes[this.currentUrl]();//根据当前的hash值来调用相对应的回调函数
//init 监听浏览器url hash更新事件
Router.prototype.init = function() {
window.addEventListener('load', this.refresh.bind(this), false);
window.addEventListener('hashchange', this.refresh.bind(this), false);
//给window对象挂载属性
window.Router = new Router();
window.Router.init();
&!DOCTYPE html&
&meta charset=&utf8& /&
&script type=&text/javascript& src=&./router.js&&&/script&
&style type=&text/css&&
&li&&a href=&#/&&&/a&&/li&
&li&&a href=&#/home&&主页&/a&&/li&
&li&&a href=&#/about&&详情页&/a&&/li&
&script type=&text/javascript&&
window.onload = function() {
var router = new Router();
router.add('home', function() {
console.log('这是主页');
router.add('about', function() {
console.log('这是详情页');
router.setIndex('home');
router.start();
(function() {
window.Router = function() {
var self =
self.hashList = {}; /* 路由表 */
self.index =
self.key = '/';
window.onhashchange = function() {
self.reload();
* 添加路由,如果路由已经存在则会覆盖
* @param addr: 地址
* @param callback: 回调函数，调用回调函数的时候同时也会传入相应参数
Router.prototype.add = function(addr, callback) {
var self =
self.hashList[addr] =
* 删除路由
* @param addr: 地址
Router.prototype.remove = function(addr) {
var self =
delete self.hashList[addr];
* 设置主页地址
* @param index: 主页地址
Router.prototype.setIndex = function(index) {
var self =
self.index =
* 跳转到指定地址
* @param addr: 地址值
Router.prototype.go = function(addr) {
var self =
window.location.hash = '#' + self.key +
* 重载页面
Router.prototype.reload = function() {
var self =
var hash = window.location.hash.replace('#' + self.key, '');
var addr = hash.split('/')[0];
var cb = getCb(addr, self.hashList);
if(cb != false) {
var arr = hash.split('/');
arr.shift();
cb.apply(self, arr);
self.index && self.go(self.index);
* 开始路由，实际上只是为了当直接访问路由路由地址的时候能够及时调用回调
Router.prototype.start = function() {
var self =
self.reload();
* 获取callback
* @return false or callback
function getCb(addr, hashList) {
for(var key in hashList) {
if(key == addr) {
return hashList[key]
模拟hashchange 在低版本 IE 需要通过轮询监听 url 变化来实现：
(function(window) {
// 如果浏览器不支持原生实现的事件，则开始模拟，否则退出。
if ( &onhashchange& in window.document.body ) { }
var location = window.location,
oldURL = location.href,
oldHash = location.
// 每隔100ms检查hash是否发生变化
setInterval(function() {
var newURL = location.href,
newHash = location.
// hash发生变化且全局注册有onhashchange方法（这个名字是为了和模拟的事件名保持统一）；
if ( newHash != oldHash && typeof window.onhashchange === &function&
// 执行方法
window.onhashchange({
type: &hashchange&,
oldURL: oldURL,
newURL: newURL
oldURL = newURL;
oldHash = newH
})(window);
主要就是监听hash的变更，然后在里面根据配置，用ajax去读对应的界面片段，然后append到主容器中就可以了。市面上的选择比较多的是:director.js，path.js，Backbone.Router，leeluolee/stateman & GitHub当前位置： &
& 在dreamweaver cs6中实现图片轮番切换效果的广告
在dreamweaver cs6中实现图片轮番切换效果的广告
类别：&&大小：279.00MB语言：简体中文&&授权：免费软件
第一页：在dreamweaver cs6中实现图片轮番切换效果的广告
第二页：在dreamweavercs6破解版中实现图片轮番切换效果的广告
　　在使用dreamweaver制作网页时我们可能会想要在网站的某个地方实现图片的切换效果以此来达到一个做广告的目的，这样的功能在dreamweaver中要怎样实现呢?我们可以一起来看看。　　dreamweaver中实现图片轮番切换效果的广告：　　1.打开Dreamweaver，新建一个网页(笔者这里建立一个html类型的网页)。如图1所示图1　　2.点击菜单栏：插入--&表格。插入一个1行1列的表格。如图2所示图2　　3.把鼠标指针放到表格中，单击菜单栏的:插入--&布局对象--&AP Div,插入一个AP Div。如图3所示图3　　4.把鼠标放到刚刚新建的AP Div里边，点击菜单栏的：插入--&图像，选择一张需要插入的图片。如图4所示图4　　5.按上面的方法依次添加其他几个AP Div，并在里边插入图片。接下来插入一个AP Div，然后再里边添加一个1行3列的表格。如图5所示图5　　6.鼠标指针放到表格第一个方框中，单击菜单栏：插入--&表单--&按钮。如图6所示图6　　7.鼠标点中添加的按钮，然后再下方属性面板中，把值修改为1。如图7所示图7
　　更多Adobe DreamWeaver cs6教程，尽在
上一篇 &：
下一篇 &：
文章链接：//www.gezila.com/tutorials/52401.html
(转载时请注明本文出处及文章链接)如何在一台路由器上实现双向NAT_百度经验
&&&&&&互联网如何在一台路由器上实现双向NAT听语音
百度经验:jingyan.baidu.com在一些特殊网络环境里，出于对网络安全或IP地址使用的角度考虑，往往会使用NAT技术进行IP地址转换。如果两个不同单位进行联网，彼此需要隐藏自己内部的IP地址，也不希望直接和对方的IP进行通讯（避免将对方IP网段的路由加到自己网内，保持网内路由的干净），这时就需要配置双向NAT来进行两个方向的地址转换功能。百度经验:jingyan.baidu.com路由器一台（以H3C路由器配置为例）百度经验:jingyan.baidu.com1示例：实现目标：单位A的网内用户（192.168.1.0网段）需要访问单位B的服务器（10.1.1.1），并实现双向NAT。联网要求：单位A的内网结构和IP地址需要对外隐藏（单位B不能看到单位A的网内IP地址，只能看到NAT转换后的1.1.1.2地址），同时单位A的内网设备不需要添加单位B的IP网段的路由，只需要访问转换到内网的192.168.1.2这个地址，确保网内的路由干净。2网络拓扑：3IP地址说明：单位A内网IP：192.168.1.0/24单位A的路由器R1地址：局域口IP为192.168.1.1，广域口IP为1.1.1.1单位B服务器IP：10.1.1.1单位B的路由器R2地址：局域口IP为10.1.1.254，广域口IP为1.1.1.14R1路由器上内部映射到外部的地址为1.1.1.2，外部映射到内部的地址为192.168.1.2END百度经验:jingyan.baidu.com1步骤1：在R1路由器上将内网192.168.1.0网段NAT映射成1.1.1.2后访问服务器，这样单位B的设备收到的数据包的IP地址都是1.1.1.2，从而隐藏了单位A内网的真实地址。nat&address-group&1&1.1.1.2&1.1.1.2（设置NAT映射地址池为1.1.1.2）&acl&number&2000&rule&0&permit&source&192.168.1.0 0.255.255.255&rule&1&deny（设置访问服务器的源地址为192.168.1.0 255.255.255.0）&&interface&Ethernet0/0/1&ip&address&1.1.1.1 255.255.255.255.255.255.240&nat&outbound&2000&address-group&1（在R1上的互联端口上配置NAT规则，将acl 2000配置的源地址网段转换成1.1.1.2后访问出去）2步骤2：在R1上把对方服务器10.1.1.1NAT翻译成内部地址192.168.1.2，供内部地址访问，这样单位A的内部用户访问192.168.1.2就等于访问对方的10.1.1.1的服务器interface&Ethernet0/0/0&ip&address&192.168.1.1 255.255.255.0&nat&server&protocol&tcp&global&192.168.1.2 any&inside&10.1.1.1 any（将外部服务器地址10.1.1.1的tcp连接映射成内网地址192.168.1.2）&nat&server&protocol&icmp&global&192.168.1.2&inside&10.1.1.1（将外部服务器地址10.1.1.1的icmp连接映射成内网地址192.168.1.2）3步骤3：配置路由在路由器R1上添加至对方服务器的路由ip route 10.1.1.1 255.255.255.255 1.1.1.14END百度经验:jingyan.baidu.com1在路由器R1上打开debug调试功能，从单位A的内网ping映射后的服务器地址192.168.1.2，观察debug信息*0. Quidway NAT/8/debug:(Ethernet0/0/0-in &:)Pro : ICMP&( & & 192.168.1.10: &758 - & 192.168.1.2: &758) ------&( & & 192.168.1.10: &758 - & 10.1.1.1: &758)*0. Quidway NAT/8/debug:(Ethernet0/0/1-out :)Pro : ICMP ID : 38234( & & 192.168.1.10: &758 - & 10.1.1.1: &758) ------&( & & 1.1.1.2:12290 - & & & &10.1.1.1: &758)*0. Quidway NAT/8/debug:(Ethernet0/0/1-in &:)Pro : ICMP ID : 38234( & & &10.1.1.1: &758 - & & &1.1.1.2:12290) ------&( & & &10.1.1.1: &758 - & & &192.168.1.10: &758)*0. Quidway NAT/8/debug:(Ethernet0/0/0-out :)Pro : ICMP ID : 38234( & & &10.1.1.1: &758 - & & &192.168.1.10: &758) ------&( & & 192.168.1.2: &758 - & &192.168.1.10: &758)&& & & 从debug调试信息可以看出，E0/0/0接口收到一个192.168.1.10访问192.168.1.2的请求被转换成访问10.1.1.1的请求；接下来在E0/0/1接口输出时将192.168.1.10访问10.1.1.1的请求转换成1.1.1.2访问10.1.1.1的请求，这时数据包被两次翻译后发送给服务器。服务器响应的数据包返回到R1路由器，这时E0/0/1接口收到一个10.1.1.1到1.1.1.2的请求，并转换成10.1.1.1到192.168.1.10的请求，然后在内网口E0/0/0上将10.1.1.1到192.168.1.10的请求转换成192.168.1.2到192.168.1.10的请求。& & & 至此，一个完整的数据包来回传输的交互过程实现。END百度经验:jingyan.baidu.com本例中内网地址向外映射为1.1.1.2这个单独的地址，一般情况广域网互联为30位掩码，所以可以把内网地址映射成路由器出口地址H3C路由器做NAT时，必须把nat server接口与nat outbond接口上的快转功能关闭。命令是undo ip fast-forwarding经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。作者声明：本篇经验系本人依照真实经历原创，未经许可，谢绝转载。投票(9)已投票(9)有得(0)我有疑问(0)◆◆说说为什么给这篇经验投票吧！我为什么投票...你还可以输入500字◆◆只有签约作者及以上等级才可发有得&你还可以输入1000字◆◆如对这篇经验有疑问，可反馈给作者，经验作者会尽力为您解决！你还可以输入500字相关经验0225210热门杂志第1期你不知道的iPad技巧3699次分享第1期win7电脑那些事6526次分享第2期新人玩转百度经验1367次分享第1期Win8.1实用小技巧2627次分享第1期小白装大神1869次分享◆请扫描分享到朋友圈}