㈠ 前端路由和后台路由有什么区别
区别在于express是服务器端的路由，也就是说需要向后台服务器发送请求，然后服务器来决定来render那个.html，这也就是最早的mvc架构模式，而前端的路由是将这一过程放在浏览器端，也就是前台写js代码控制，不在请求服务器，前台一般利用histroy和hash来控制，达到不刷新页面可以使显示内容发生变化，这样好处是js代码不发生变化(浏览器端可以维护一个稳定的model)；一般单页应用就是前台来控制路由，这样速度更快，用户体验更好。单页应用还将模板拿到了浏览器端，从而解放了服务端，服务端趋于服务化。
㈡ 前端路由(二)
前面我们做到了切换路由不发送请求，现在我们要 把路由和组件对应起来达到渲 染。
接下来介绍的是VueRouter的原理，它是怎么做到的这个功能的。其会在 根Vue 上注册2个全局 函数式组件 <router-link> <router-view>，在根Vue原型上 定义$route(当前路由Route对象)和$router(传入newVue的router对象列表)两个属性(所有子Vue实例会继承)。
<router-link>，作为一个子组件，初始化渲染时会去执行render函数，主要做了 其 内部属性 (tab标签,activeClass等)的 处理 ，在点击时会去 执行router.push做url变化 。它不涉及渲染，逻辑比较简单。
执行router.push(replace)做url变化和初始化VueRouter时都会去触发 transitionTo方法做路径切换 。这个方法里做了很多事情，接下来会介绍。它执行完毕的成功回调中会切换url。
最重要的问题是渲染组件 ， <router-view>如何知道去渲染哪个组件 ？我们手头有一个按文档规定写的new VueRouter({ routers })列表,传给了根Vue，VueRouter通过它做了很多事情。
首先在new VueRouter()时,会去执行其构造函数,其中 createMatcher 方法,会递归遍历routers把每个router对象进行重新描述得到 RouteRecord 对象，并由它们得到3个列表( pathList (路由path列表), pathMap (路由path: record列表), nameMap (路由name:record列表))，这3个列表是为导航守卫服务的我们先不管它。createMatcher最后返回2个方法，1、 addRoutes ，动态对上面3个列表修改。2、 match ，根据传入的位置和当前的路径，计算出新的路径为 Route对象。
transitionTo路径切换时，会去执行 match 函数计算新路径Route对象，其有一个属性值 matched ，是从当前RouteRecord向上(parent)查找直到根RouteRecord的到的RouteRecord数组，这样得到一个 层级关系 。我们在<router-view>的render函数中会标志flag表示是router-view组件，我们上(父组件)查找有flag标志就 会把 depth++，最后得到 当前<router-view>的深度 。我们通过 $route.matched [depth]就可以 找到router-view需要去渲染的组件。
这里还有一个问题， 我们怎么知道当前$route是哪个？ 在初始化routerVue，init()中规定了所有子组件的实例的$route属性指向根Vue的$route属性，根Vue的$route属性又等于this._router.history.current。而current这个值又是在路径切换时会变化的。也就是说我们路径变化会把当前$route指为当前组件路由的route路径对象，这个我们不用担心。
概括： 就是做路径切换时，我们会根据我们写的路由表，把当前路由往上到根路由的路由对象组成一个数组，描述一个 层级关系List 。<router-view>是函数式组件，它有标志flag，我们也会从它往上查找<router-view>直到根vue，有就depth++，得到当前<router-view> 层级位置depth 。 List[depth].component就是我们要渲染的组件。
我们知道<router-view>要去渲染哪个组件，它是怎么做到更新视图的？ 更新视图肯定也要符合Vue渲染原理呀，要把1个数据响应式化，get时收集订阅者Watcher并初始化渲染，set时派发更新 把订阅该数据的Watcher重新渲染。这个响应式数据是谁呢？就是定义在根Vue的_route，子Vue的$route也都指向它。<router-view>函数render执行的时候，会去取$route相当于访问根Vue的_route，会触发订阅者Watcher收集并初始化渲染。做路径切换时，会修改_route(即记录当前路由路径的this._router.history.current)。
触发点 ：router-link 提供了"下一个位置参数"，准备去切换url时，触发transitionTo方法去做路径切换。
响应式化数据 ：history.current。记录当前路径Route对象(由当前路由和下一个位置计算出来)，收集订阅者，派发更新渲染，都围绕它进行。
路由配对组件 ：当前路径Route对象(由当前路由和下一个位置 计算出来)和我们写的路由表，得到当前路径Route对象到根路径的 路由路线 数组，<router-view>肯定在这之内，不会比其更深层，所以在这数组之内可以用depth取到。
守卫导航是怎么做到的 ？守卫导航就是transitionTo方法做路径切换时执行的一系列钩子函数。
这些钩子函数 有些定义在全局 ，用 this.router.xxx可以取到。
有些定义在组件内 ，通过前面的Routed.matched，即将离开路由的matched列表和当前路由的matched列表，从头对比到第一个不同，得到 updated (目标RouteRecord和当前RouteRecord相同，前面重复的部分)、 activated( 目标RouteRecord和当前RouteRecord不同，后面不同的部分 ) 、 deactivated( 当前RouteRecord和目标RouteRecord不同，后面不同的部分 ) 三个RouteRecord数组。 通过这些RouteRecord去取定义在组件中的导航守卫 。
有些定义在路由中 ，也通过这些 RouteRecord去取。
到这里就完成了，接下来会分析前端路由在实际开发中的运用，比如页面权限设置！
㈢ angularjs路由是什么意思
angularjs路由是指一款用angularjs前端语言设计出程序和框架的路由器
1.AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
2.路由器（Router），是连接因特网中各局域网、广域网的设备，它会根据信道的情况自动选择和设定路由，以最佳路径，按前后顺序发送信号。 路由器是互联网络的枢纽，"交通警察"。目前路由器已经广泛应用于各行各业，各种不同档次的产品已成为实现各种骨干网内部连接、骨干网间互联和骨干网与互联网互联互通业务的主力军。路由和交换机之间的主要区别就是交换机发生在OSI参考模型第二层（数据链路层），而路由发生在第三层，即网络层。这一区别决定了路由和交换机在移动信息的过程中需使用不同的控制信息，所以说两者实现各自功能的方式是不同的。
3.路由器（Router）又称网关设备（Gateway）是用于连接多个逻辑上分开的网络，所谓逻辑网络是代表一个单独的网络或者一个子网。当数据从一个子网传输到另一个子网时，可通过路由器的路由功能来完成。因此，路由器具有判断网络地址和选择IP路径的功能，它能在多网络互联环境中，建立灵活的连接，可用完全不同的数据分组和介质访问方法连接各种子网，路由器只接受源站或其他路由器的信息，属网络层的一种互联设备。
㈣ 什么是路由路由分为哪两类
提到路由，大家一般会想到生活中常见的路由器，路由器主要用于连接多个逻辑上分开的网络，逻辑网络代表-个单独的网络或者一个子网，可以通过路由器功能来完成不同网络之间数据的传递。在Vue中也引人了路由的概念，因此，我们先来对程序开发中的路由进行简单地了解。
程序开发中的路由分为后端路由和前端路由，下面我们分别进行简要介绍。
1. 后端路由
后端路由通过用户请求的URL分发到具体的处理程序，浏览器每次跳转到不同的URL都会重新访问服务器。服务器收到请求后，将数据和模板组合，返回HTML页面，或者直接返回HTML模板，由前端JavaScript程序再去请求数据，使用前端模板和数据进行组合生成最终的HTML页面。下图演示了后端路由的工作原理。
2. 前端路由
前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做。前端路由和后端路由的原理是类似的，但是实现的方式不一样。对于单页面应用(Single Page Application, SPA)来说，主要通过URL中的hash(#号)来实现不同页面之间的切换。hash有一个特点，就是HTTP请求中不会包含hash相关的内容,所以单页面程序中的页面跳转主要用hash来实现。
下图演示了前端路由的工作原理。
在上图中，index.html 后面的‘#home”是hash方式的路由，由前端路由来处理，将hash值与页面中的组件对应，当hash值为“#/home” 时，就显示“首页”组件。前端路由在访问一个新页面的时候仅仅是变换了一下hash值而已，没有和服务端交互，所以不存在网络延迟，提升了用户体验。
㈤ 前端路由和后端路由有什么区别
组网级层的区别，主级路由次级路由之间的区别。
㈥ ：前端路由是什么东西
前端路由是不涉及服务器的，是前端利用hash或者HTML5的history API来实现的，一般用于不同内容的展示和切换。
其实前端路由要做的就是两点：
在页面不刷新的情况下实现url的变化
捕捉url的变化，根据url更改页面内容
㈦ 什么是"前端路由"什么时候适合使用"前端路由""前端路由"有哪些优点和缺点
你的理解有错误，所谓的前端路由是为了和后端路由区分开。后端路由也叫做二级路由，三级路由！简单举个例子，你在光猫后面插的第一个路由器就叫做前端路由，它主管你连接在这台路由器上的其他所有路由器，也就是二级或者三级路由器，在家用领域这个概念基本不会使用！但在公司或者一些比较大的企业，前端路由器的功能决定你公司的其他电脑的功能，比如带宽，认证，收费等！~
㈧ 前端路由（1）：基础知识
URI： Uniform Resource Identifier 统一资源标识符； 由5部分组成：
URI = scheme:[//authority]path[?query][#fragment]
scheme： 协议 常见的有 http , https , file等
authority: 可以由三部分组成 [userinfo]host:[port]
其中userinfo指用户信息，可以通过authority中的userinfo进行的登录（当然现在前端应用并不会这么做）
host指的是主机地址，可以是ipv4或者是用方括号括起来的ipv6地址，或者是可以通过DNS解析成ip地址的域名，如www..com
port指端口号， 如果不指定则使用默认端口号，http默认端口号80， https默认端口号443
path: 指文件路径，指定服务器上文件路径以访问特定资源
query： 查询字符串 又称search值 get接口传参会通过此部分进行传输
fragment： 片段标识符 又称hash值， 通常用于标记已获取资源的子资源，不会被传递到服务器端
关于编码：
URI是用的是百分号编码，对于需要编码的字符，将其表示为2个十六进制的字符，然后在其前面加入转义字符%
两个编码api：
encodeURI 与 encodeURIComponent： encodeURI编码的范围比encodeURIComponent要小 ，其中encodeURI是w3c的标准。
window.history对象存在很多属性， 比较重点关注的有：
readonly length: number;
readonly state: any;
方法：
pushState(state: any, title: string, url?: string | null) : void;
replaceState(state: any, title: string, url?: string | null) : void;
go(delta: number): void 与 back():void; forward():void;
第一个参数需要是可被结构化复制的数据类型， （结构化复制： 可以处理循环引用的JSON），会持久化存储在浏览器内部，在每次页面生成的时候会被重新提取出来（属于浏览器实现的深拷贝）
第二个参数title传字符串，用于标记当前方法
第三个参数url，可以传简单字符串，也可以传url对象，需要注意的是因为此方法被同源策略所限制，url必须与当前href同源，否则会报错。此参数可以不传，不传的时候就是单纯的操作浏览器历史栈。
方法作用： 生成一个新的历史栈并将指针指向它，操作并不会刷新浏览器，也就是说此方法会改变浏览器的历史栈length，和state对象；
replaceState与pushState参数完全相同，使用方法类似，但其作用是替换当前历史栈，也就是说历史栈的指针与长度不会发生变化，其作用仅仅是替换当前的url与state。
pushState与replaceState方法其url传参方式多种多样，可以是绝对路径，也可以是相对路径，也可以传递查询字符串search值"?xxx"与片段标识符"#xxx"，其最大特点是操作浏览器url，history对象的state与length属性，但不会触发浏览器跳转。
pushState与replaceState方法以相对路径方式进行操作url的时候，会受到当前html的<base>元素的href的影响，此时base元素的href会替换浏览器的url的href作为基准值进行相对路径跳转。
浏览器的跳转方法主要围绕window.location与window.history这两个对象进行。
1) window.history
window.history.go(delta: number): void;
移动浏览器历史栈指针并且刷新页面
window.history.back() === window.history.go(-1)
window.history.forward() === window.history.go(1)
2) window.location
window.location.href
get :() =>string;
set : (url: string) => void; // 触发浏览器跳转 并增加历史栈 不收同源策略限制
window.location.hash
get: () => string;
set: (hash: string) => void;
与href类似，其区别是用于修改浏览器导航栏url的hash值，会产生新的历史栈，但不会触发浏览器页面刷新，并且在set hash值与当前url的hash值相同时，不会有任何事发生（等于没执行）。
window.location.replace
这是一个纯方法，其作用是替换当前浏览器的栈记录，设置为传入新的URL，并且刷新页面。
replace可以对hash进行操作并且触发对应的事件，不会受相同hash的规则影响
1） popstate事件
history.pushState与history.replaceState产生的历史栈记录中，如果栈指针发生了移动，或者点击了浏览器的前进或者回退按钮时，会触发popstate事件，可以通过window.addEventListener去添加事件监听。
popstate拿到的event对象最关键的属性是event.state，这个event.state是直接从浏览器底层存储器中取出（属于深拷贝），而非从历史栈中的state取出，因此直接修改历史栈state并不会对event.state造成影响（反之亦然）。
前后两次设置相同的location.hash时不会触发两次popstate事件，但是通过location.href设置两次相同的hash可以，虽然可以触发两次popstate事件，但是历史栈只会增加一层。
2）hashchange事件
hashchange时间监听的是浏览器url的片段标识符的变化，也就是hash值的变化，事件对象event可以拿到关键的oldUrl和newUrl，表示hash跳转前的url和跳转后的url。
pushState方法即使是只改动了浏览器的hash值，也不会触发hashchange事件。
这两个事件都可以通过window.dispatchEvent方法去触发，dispatchEvent方法需要传入一个事件对象：
window.dispatchEvent(new PopStateEvent());
对于hashchang事件同理：
window.dispatchEvent(new HashChangeEvent());
㈨ vue路由router,routes,route
SEO：搜索引擎优化，
前端路由：控制页面访问路径，单页面应用
后端路由：控制接口
1，URL的hash,location.hash
2,HTML5的history模式，history.pushState(data,title,url)
使用vue create '文件名'，创建一个vue脚手架，
vue.use(VueRouter),调用vue-router这个对象上面的install方法，注册两个属性在vue原型对象上，分别是vue.prototype.$router(整个项目的路由对象)和vue.prototype.$route(当前活跃的路由对象)
实例化一个VueRouter对象
router-link相当于a标签，跳转页面。router-view相当于一个占位符，把现在页面访问的路腔兆径内容加载进来，替换掉router-view
vueRouter跳转页面的方式有用this.$router.push('/home')，this.$router.replace()和用标签<router-lin>
this.$router.push('/home?key='+vaule+'&key1='+vaule1)。在另一个页面用this.$route.query获取传过汪前来的值
第一种
父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。
接收参数
第二种
父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？
接收参数都是一样
第三种
在路由规则里定义如下
pid是一个变量，在用这个动态路由的时候可以
懒加载是当你点击一个页面时，先缓存所有的链接，不执行，只执行那个困圆清页面的资源，这样可以提升效率，提高响应速度。
路由懒加载很简单，在component用import引入组件，如下：
router相当于一个路由器，路由器里面有路由表，既routes，表中很多路由规则，route是routes的一个个路由规则
㈩ 前端路由”有哪些优点和缺点
前端路由的优点和缺点：
优点
用户体验好，不需要每次都从服务器全部获取，快速展现给用户
缺点
使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存
单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置