vue.js의 보조 라우팅 및 3차 라우팅 코드 분석-JS 튜토리얼-php.cn

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

不言

풀어 주다： 2018-08-23 16:25:16

원래의

2138명이 탐색했습니다.

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

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

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

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

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

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

두 번째 수준 라우팅

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

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"
});

로그인 후 복사