初学Vue(5)--路由

时间：2023-03-31 18:01:25 vue.js

学习清单初学Vue(1)--Vue初学(2)简单介绍初学Vue(2)--条件渲染、修饰符、循环监听属性、计算属性初学Vue(4)--axios前端交互、组件单页应用SPA:SinglePageApplication单页应用MPA:MultiplePageApplication多页应用Single-pagewebapplicationisonlyonewebpageApplication是加载单个HTML页面的web应用并在用户与应用程序交互时动态更新页面。不同的是，对于传统的多页面应用，每次向服务器请求都会返回一个完整的页面。对于单页应用，第一次只会加载页面，后续每次请求只会获取必要的数据。然后将页面中的js解析得到的数据显示在页面上。单页优势：减少请求量，加快页面响应速度，减轻服务器压力，更好的用户体验，让用户在webapp中体验原生app的流畅，（局部刷新）单页劣势：开发成本高（需要学习路由）不利于SEO展示：https://music.163.com/路由介绍路由：是浏览器URL中的哈希值（#hash）与展示内容的对应规则看法。简单来说，路由就是一组映射规则（一对一对应的规则），规则是由开发者制定的。-当URL中的哈希值（#hash）发生变化时，路由会按照既定的规则显示相应的视图内容。为什么要学习路由？在WebApp中，经常会出现一个页面用来展示和管理整个应用的功能。SPA往往是一个功能复杂的应用。为了有效管理所有视图内容，前端路由应运而生。vue中的路由：就是hash和component的对应关系，一个hash值对应一个component1：路由的基本使用准备（三）安装：npmivue-router导入：//注意：import路由一定要在vue之后引入，因为vue-router是基于vue工作的实例路由对象+挂载到vue实例路由对象:constrouter=newVueRouter()挂载到vue:newVue({router,data,methods})验证路由是否挂载成功与否取决于打开页面，最后是否有#/具体步骤(4)1.入口2.路由规则3.组件4.出口#1.入口//方法一：url地址为入口debugging开发时输入url地址更改hash值`01-routing.html的基本使用#/one`//方法二：声明式导航：router-link+to（见下文）#2.路由规则//path:路由路径//component:以后显示的路由组件routes:[{path:'/one',component:One},{path:'/two',component:Two}]#3.Component//使用返回值这个组件的名字constOne=Vue.component('one',{template:`

subcomponentone

`})#4.export#总结ize入口hash路径，根据路由匹配规则找到对应的组件，显示到对应的出口位置2：最常用的入口是声明式导航router-link

HomepagecomponentconstOne={template:`

subcomponentone

`}Demo:多个组件匹配

一个两个

三：入口导航菜单高亮处理点击导航=>元素添加两个类一个二修改1:直接修改类的样式.router-link-exact-active,.router-link-active{color:red;font-size:50px;}修改方法二：使用已有的类样式=>修改默认高亮的类名constrouter=newVueRouter({routes:[],//修改默认高亮的类名标签//red是已有的linkActiveClass:'red'})四：路由配置4.1动态路由=>详情列表导入：列表中的三个手机都必须点击才能进入详情页。显示不同的数据只需要一个组件。#入口手机1手机2手机3手机4没有参数怎么样？？？？#规则路由：[//2。路由规则{path:'/detail/:id?',component:Detail}]#获取三类参数MethodconstDetail={template:`//方法一：直接读取组件中的

显示内容详情页的....{{$route.params.id}}

`,created(){//方法二：js直接读取//打印只会打印一次，因为组件是复用的,并且钩子函数每次进来只会执行一次console.log(this.$route.params.id)},//方法三：监听路由的参数，为什么不用in-深度监控，因为一个路由变化会对应一个新的路由对象（地址变化）watch:{$route(to,from){console.log(to.params.id)}}}4.2路由对象-$route路由对象（routeobject）表示当前活跃路由的状态信息，包括解析当前url得到的信息希腊值path==>一个路由对象$route.pathtype:string字符串，对应当前路由的路径，总是解析为绝对路径，如"/foo/bar"#后面？前面内容$route.paramstype:Object一个key/value对象，包括动态分片和全匹配分片。如果没有路由参数，则为空对象。一个key/value对象，包括动态分片和全匹配分片，如果没有路由参数，则为空对象。$route.querytype:Objectparameterobject表示URL查询参数的key/value对象。例如，对于路由/foo?user=1，$route.query.user==1，或者如果没有查询参数则为空对象。$route.hashtype:string当前路由的哈希值（带#），如果没有哈希值则为空字符串。$route.fullPath类型：string解析后的全路径URL，包括查询参数的全路径和hash。#Demo:detail{path:'/detail/:id?',component:detail}创建并打印在组件this.$route>fullPath:"/detail/4?id=001#one">hash:"#one">params:{id:'4'}>query:{age:21}>path:'/detail/4'4.3Nestedrouting=>childrenimport:urltestparentandchild,wantchildtodisplayparentinternaladditioninparent:addchildren/child和child在规则中的区别就是如果是/child=>那么access可以直接访问#/child可以访问子组件如果是child=>那么access应该访问#/parent/child才能访问子组件constparent={template:`

parent

`}constchild={template:`

child

`}constrouter=newVueRouter({routes:[{path:'/parent',component:parent,children:[{path:'/child',component:child}]}]})4.4命名路由有时通过名称来标识路由更方便，尤其是y在链接A路线中，或执行某些跳跃时。===>场景你可以在创建Router实例时在路由配置中为路由设置名称。==>Howtoname#命名路由：[{path:'/parent',name:'parent',component:parent}]#入口链接+跳转（使用路径和名称转换）

点击点击#忘记带上：原始对象类型fn(){//this.$router.push('/parent')this.$router.push({name:'parent'})}4.5命名视图导入：有时候想同时显示多个视图（同级），要求：访问/根目录显示以下三个组件同时Componentconstheader={template:`

header

`}constmain={template:`

main

`}constfooter={template:`

footer

`}规则#之前的方法只能显示三个headers#演示之前的效果routes:[{path:'/',components:{default:header,m:main,f:footer}}]export

4.6重定向redirect:'/header'redirect:{name:'header'}redirect:to=>{//console.log(to)return{name:'about'}}4.7组件传参的原始方法是使用$route获取#entry123#Rulesroutes:[{path:'/header/:id',component:header,}]#getparameterconstheader={template:`

header{{$route.params.id}}

`}布尔模式#entry123#Ruleroutes:[{path:'/header/:id',component:header,//如果props设置为true,route.params将被设置为组件属性props:true}]#getparameterconstheader={//参数id作为参数props:['id'],template:`

header{{id}}

`}ObjectMode#Entry123#Rulesroutes:[{path:'/header',component:header,props:{foo:'0000'}}]#组件常量header={props:['foo'],template:`

header{{foo}}

`}函数模式#同对象模式#不同的是props值不同props:to=>{return{foo:'0000'}}注意：对象模式和函数模式参数在props中，所以不要在声明式导航中传递参数。4.8嵌套路由现实生活中的应用界面通常是由多层嵌套的组件组成的，同样，URL中动态路径的每一段也按照一定的结构对应着每一层嵌套的组件。使用vue-router，可以使用嵌套路由配置非常简单地表达这种关系。单层路由

constUser={template:'

User{{$route.params.id}}

'}constrouter=newVueRouter({routes:[{path:'/user/:id',component:User}]})其中是顶层出口，渲染最顶层路由匹配s组件。同样，渲染的组件也可以包含自己的嵌套。比如添加一个嵌套路由模板配置constUser={template:`

User{{$route.params.id}}

`}路由配置：在嵌套outlets中渲染组件，需要在VueRouter的参数中使用children配置constrouter=newVueRouter({routes:[{path:'/user/:id',component:User,children:[{//当/user/:id/profile匹配成功时，//UserProfile会渲染到User的path:'profile',component:UserProfile},{//当/user/:id/posts匹配成功时//UserPosts将在用户的路径中呈现：'posts',component:UserPosts}]}]})注意以/开头的嵌套路径将被视为根路径。这使您可以充分利用嵌套组件而无需设置嵌套路径。五：高级路由5.1元信息规则声明routes:[{path:'/header',component:header,meta:{title:'XXXX'}}]getcreated(){document.title=this.$route.meta.title}作用：可以作为路由导航时的判断5.2程序化导航constone={template:`

返回上一页跳转到第二页替换第二页

`,methods:{handleClick(type){if(type=='back'){//返回this.$router.back()}elseif(type=='push'){//跳转有历史this.$router.push('/two')}else{//替换没有历史this.$router.replace('/two')}}}}consttwo={template:`

two

`}5.3Navigationguardrouter.beforeEach((to,from,next)=>{//访问日志inif(to.name=='login'){//下一步next()}else{//停止跳转next(false)//跳转到下一步next({name:'login'})或使用路径下一个（'/登录'）}}）