详解vue路由篇(动态路由,路由嵌套)

　　

什么是路由?网络原理中,路由指的是根据上一接口的数据包中的IP地址,查询路由表转发到另一个接口,它决定的是一个端到端的网络路径。
　　

　　

web中,路由的概念也是类似,根据URL来将请求分配到指定的一个“端”。(即根据网址找到能处理这个URL的程序或模块)
　　使用vue.js构建项目,vue.js本身就可以通过组合组件来组成应用程序;当引入vue-router后,我们需要处理的是将组件(组件)映射到路由(路线),然后在需要的地方进行使用渲染。

　　

　　

1,创建vue项目,执行vue init webpack projectName命令,默认安装vue-router。项目创建后,在主组件App.vue中HTML的部分:

　　 　　 　　& lt; template> 　　& lt; div id=坝τ谩北? 　　& lt; router-view/比; 　　& lt;/div> 　　& lt;/template> 　　之前 　　 　　

上述代码中,& lt; router-view/祝辞是路由出口,路由匹配到的组件将渲染在这里。

　　

2,文件路由器/index.js中:

　　 　　 　　从“Vue”//进口Vue导入Vue插件 　　从“vue-router”进口路由器//导入vue-router 　　从“@/组件/HelloWorld”导入HelloWorld//导入HelloWorld组件 　　 　　Vue.use(路由器)//引入vue-router 　　出口默认新路由器({ 　　路线:[ 　　｛ 　　路径:'/',//匹配路由的根路径 　　名称:“HelloWorld”, 　　组件:HelloWorld 　　} 　　］ 　　}） 　　 　　之前 　　 　　

以上代码比较简单,一般的导入,引用操作,其中Vue.use()具体什么作用?
　　

　　

个人理解:Vue。使用(插件,参数)就是执行一个插件函数,或执行插件的安装方法进行插件注册(如果插件是一个函数,则执行;若是一个插件,则执行插件的安装方法…),并向插件或其安装方法传入Vue对象作为第一个参数,如果有多个参数,使用的其它参数作为插件或安装的其它参数。(具体需要分析源码,在此不再过多解释)
　　

　　


　　

　　

什么是动态路由?动态路由是指路由器能够自动的建立自己的路由表,并且能够根据实际情况的变化实时地进行调整。
　　

　　

1,在vue项目中,使用vue-router如果进行不传递参数的路由模式,则称为静态路由;如果能够传递参数,对应的路由数量是不确定的,此时的路由称为动态路由。动态路由,是以冒号为开头的(:),例子如下:

　　 　　 　　出口默认新路由器({ 　　路线:[ 　　｛ 　　路径:“/? 　　名称:“HelloWorld”, 　　组件:HelloWorld 　　},{ 　　路径:/RouterComponents: id, 　　名称:“RouterComponents”, 　　组件:RouterComponents 　　} 　　］ 　　}） 　　之前 　　 　　

2路由跳转,执行方式有两大类;
　　

　　

第一大类:router-link模式,直接把参数写在,属性里面:

　　 　　 　　& lt; router-link:="{名称:RouterComponents,参数:{id: 110}}”在跳转& lt;/router-link> 　　 　　

第二大类:$ router.push()模式,代码如下:

　　 　　 　　方法:{ 　　changeFuc (val) { 　　美元。router.push ({ 　　名称:“RouterComponents”, 　　参数:{id: val} 　　}） 　　} 　　} 　　之前 　　 　　

或者: 　　 　　 　　方法:{ 　　changeFuc (val) { 　　美元。router.push ({ 　　路径:/RouterComponents/$ {val}, 　　}） 　　} 　　} 　　之前 　　 　　


　　

　　

vue项目中,界面通常由多个嵌套的组件构成;同理,URL中的动态路由也可以按照某种结构对应嵌套的各层组件:

　　 　　 　　出口默认新路由器({ 　　路线:[ 　　｛ 　　路径:'/',//根路由 　　名称:“HelloWorld”, 　　组件:HelloWorld 　　},{ 　　路径:/RouterComponents: id, 　　组件:RouterComponents, 　　孩子:( 　　｛ 　　路径:",//默认路由 　　名称:' ComponentA ',//当匹配上RouterComponents后,默认展示在& lt; router-view>中 　　组件:ComponentA 　　}, 　　｛ 　　路径:/ComponentB, 　　名称:“ComponentB”, 　　组件:ComponentB 　　}, 　　］ 　　} 　　］ 　　}） 　　之前 　　 　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

详解vue路由篇(动态路由,路由嵌套)