欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端路由和后端路由

程序员文章站 2024-02-14 17:23:40
...

什么是路由

  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.<routerlinkto="/login?id=10"tag="span"></routerlink>console.log(this.router.query.参数名就可以获取到参数 *实例* 传递参数:<router-link to="/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>