前端路由和后端路由

什么是路由

1. **后端路由：**对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；

2. **前端路由：**对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；不会涉及到页面刷新，只是切换组件

3. 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；
   4.路由的使用
   1.先导入路由组件类库，
   2.创建一个路由，在new路由对象实例的时候,可以为构造函数传递一个配置对象，在new路由对象的时候,可以为构造函数,传递一个对象//router 这个配置对象中的route表示 路由匹配规则的意思
   var routerObj=new VueRouter({
   routes:[
   //每个路由规则都是一个对象,这个规则对象身上有两个必须的属性
   //属性1是path 表示监听哪个路由链接地址
   //属性2 是component 表示,如果路由是前面匹配到的path,则表示component属性对应的组件
   //component对应的属性值,必须是一个组件的模板对象,不能是组建的引用名称
   {path:’/login’,component:login},
   {path:’/register’,component:register}
   ]
   )}
   3.在vue实例中将路由绑定到实例中，使用router：路由名字，进行绑定
   4.在实例中添加标签，作用就相当于一个容器
   5.如果使用超链接进行跳转路由，需要在指定地址时添加#前缀，因为路由使用URL中的hash(#号)来实现不同页面之间的切换
   使用a标签，会先去路由中匹配这个地址，再去展示不同的组件
   6.使用vue内部的router-link标签，实现跳转登录
   注册
   使用tag属性可以将其渲染为其他组件
   7.使用redirect实现重定向{path:’/’,redirect:‘login’},
   设置路由选中高亮
   两种方式：
   一：/是线路有高亮/
   .router-link-active{
   color: red;
   font-weight: 200;
   font-style: italic;
   }
   使用默认class类，自己添加样式
   二：在构造函数中添加自己的class
   使用linkActiveClass:‘myactive’
   设置路由选中动画
   
   
   
   
   使用transition包裹起来，再添加样式 使用mode实现上一个元素离开完成后一个元素才进入
   路由使用query方式传递参数
   通过地址传递的参数保存在实例中的query中，可以使用$router.query.参数名就可以获取到参数 *实例* 传递参数：&lt;router-link to=&quot;/login?id=10&quot; tag=&quot;span&quot;&gt;登录&lt;/router-link&gt; 获取参数：console.log(this.$router.query.参数名就可以获取到参数∗实例∗传递参数：<router−linkto="/login?id=10"tag="span">登录</router−link>获取参数：console.log(this.route.query.id)
   路由使用params方式进行传递参数
   使用占位符的方式进行匹配
   在定义路由时：{path:’/login/:id/:name’,component:login},
   在进行跳转时：登录
   参数的个数必须要匹配
   路由的嵌套
   使用router中的children属性进行嵌套子路由，子路由的path不要带斜线，否则永远以根路径进行请求
   例子
   routes: [
   {
   path: ‘/account’,
   component: account,
   // 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
   children: [
   { path: ‘login’, component: login },
   { path: ‘register’, component: register }
   ]
   }
   // { path: ‘/account/login’, component: login },
   // { path: ‘/account/register’, component: register }
   ]
   html代码：

展示一下

		<router-view>
			
		</router-view>
	</div>
	<template id="tmpl">
		<div>
			<h1>这是一个组件</h1>
			<router-link to="/account/login">登录</router-link>
			<router-link to="/account/register">注册</router-link>
			<router-view></router-view>
		</div>
	</template>