집 > 기사 > 웹 프론트엔드 > vue.js의 보조 라우팅 및 3차 라우팅 코드 분석

vue.js의 보조 라우팅 및 3차 라우팅 코드 분석

不言원래의: 2018-08-23 16:25:162086검색

이 글의 내용은 vue.js의 2단계 라우팅과 3단계 라우팅에 대한 코드 분석입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

2차 및 3차 라우팅을 사용하는 이유는 무엇인가요?

프로젝트에 여러 개의 975b587bf85a482ea10b0a28848e78a4가 있는 경우 계층적 라우팅을 사용해야 합니다.

라우팅이 계층적이지 않고 여러 개의 975b587bf85a482ea10b0a28848e78a4가 있는 경우 모두 1단계로 정의됩니다. 라우팅하면 프로젝트의 975b587bf85a482ea10b0a28848e78a4 콘텐츠 표시가 혼란스럽습니다.

경로가 계층적이면 2차 또는 3차 경로가 트리거될 때 이 경로가 해당 구성 요소를 대체합니다. 콘텐츠는 상위 라우팅 구성 요소의 975b587bf85a482ea10b0a28848e78a4로 전달되므로 혼란이 발생하지 않습니다.

첫 번째 수준 라우팅이 트리거되면 자연스럽게 루트의 975b587bf85a482ea10b0a28848e78a4 등록된 구성 요소

두 번째 수준 라우팅

첫 번째 수준 경로에 하위 속성 배열을 추가하고 두 번째 수준 경로를 넣습니다.

path 속성은 점프 후 URL 주소 표시줄의 표시를 결정합니다

//main.js
//一级路由
import About from &#39;./components/about/About&#39;


//二级路由
import Contact from &#39;./components/about/Contact&#39;
import Delivery from &#39;./components/about/Delivery&#39;
import History from &#39;./components/about/History&#39;
import OrderingGuide from &#39;./components/about/OrderingGuide&#39;

const router= new VueRouter({
  routes:[
    {path:&#39;/about&#39;,name:&#39;about&#39;,component:About,children:[
        {path:&#39;/about/contsssssssssssssssact&#39;,name:&#39;contactLink&#39;,component:Contact},
        {path:&#39;/history&#39;,name:&#39;historyLink&#39;,component:History},
        {path:&#39;/&#39;,name:&#39;deliveryLink&#39;,component:Delivery},
        {path:&#39;/orderingGuide&#39;,name:&#39;orderingGuideLink&#39;,component:OrderingGuide},
      ]},
    {path:&#39;*&#39;,redirect:&#39;/&#39;}
  ],
  mode:"history"
});

3차 라우팅

2차 라우팅과 유사

const router= new VueRouter({
  routes:[
    {path:&#39;/&#39;,name:&#39;home&#39;,component:Home},
    {path:&#39;/menu&#39;,name:&#39;menu&#39;,component:Menu},
    {path:&#39;/admin&#39;,name:&#39;admin&#39;,component:Admin},
    {path:&#39;/about&#39;,name:&#39;about&#39;,component:About,redirect: {name:&#39;contactLink&#39;},children:[   //二级路由
        {path:&#39;/about/contact&#39;,name:&#39;contactLink&#39;,component:Contact},
        {path:&#39;/history&#39;,name:&#39;historyLink&#39;,component:History},
        {path:&#39;/delivery&#39;,name:&#39;deliveryLink&#39;,component:Delivery},
        {path:&#39;/orderingGuide&#39;,name:&#39;orderingGuideLink&#39;,component:OrderingGuide,redirect:{name:&#39;phonelink&#39;},children: [  //三级路由
            {path:&#39;/phone&#39;,name:&#39;phonelink&#39;,component:Phone},
            {path:&#39;/name&#39;,name:&#39;namelink&#39;,component:Name}
          ]},
      ]},
    {path:&#39;/login&#39;,name:&#39;login&#39;,component:Login},
    {path:&#39;/register&#39;,name:&#39;register&#39;,component:Register},
    {path:&#39;*&#39;,redirect:&#39;/&#39;}
  ],
  mode:"history"
});

vue.js의 보조 라우팅 및 3차 라우팅 코드 분석

두 번째 수준 라우팅

3차 라우팅

관련 기사