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

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

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

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

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

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

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

두 번째 수준 라우팅

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

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

//main.js
//一级路由
import About from './components/about/About'


//二级路由
import Contact from './components/about/Contact'
import Delivery from './components/about/Delivery'
import History from './components/about/History'
import OrderingGuide from './components/about/OrderingGuide'

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

3차 라우팅

2차 라우팅과 유사

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

관련 권장 사항:

Vue.js 라우터 사용 방법 요약(코드 포함)

vue에서 라우터 구성 방법을 소개합니다. js

위 내용은 vue.js의 보조 라우팅 및 3차 라우팅 코드 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!