Vue-cli 4 경로 설정 깊이 이해

10941 단어 Vue-cli4경로배치 하 다.
프롤로그-vue 경로
Vue-router 는 Vue 공식 경로 플러그 인 으로 Vue.js 깊이 와 통합 되 어 있 습 니 다.
vue-router 를 사용 한 단일 페이지 응용 프로그램 에서 url 의 변 화 는 구성 요소 의 전환 을 일 으 켜 페이지 전환 효 과 를 얻 을 수 있 습 니 다.따라서 URL 을 우리 가 원 하 는 대로 바 꾸 고 URL 이 바 뀐 후에 페이지 가 어디로 향 하 는 지 는 vue-router 를 설정 하 는 두 가지 문제 입 니 다.
[SPA 웹 페이지]전단 렌 더 링 은 한 페이지 의 부 응용 SPA 페이지 를 실현 시 켰 습 니 다.전체 웹 페이지 는 HTML 페이지 만 있 고 정적 자원 서버 에는 HTML&CSS 만 있 으 며 심지어 JS 만 있 습 니 다.
[부 응용]서버 에 보 내 는 새로운 요청 URL 에 의존 하여 서버 에서 자원 을 얻 은 후 전단 로 는 페이지 에 자원 을 배분 하 는 해당 구성 요 소 를 책임 집 니 다.
[단일 페이지]의 실현 은 url 이 전단 에서 바 뀌 어야 합 니 다.전단 경로 가 나타 나 면 전단 경로 가 router 의 감청 에 따라 맵 관계 에서 바 꿔 야 할 부분 을 찾 아 새로운 자원 을 추출 하고 바 꿔 야 할 부분 만 다시 렌 더 링 합 니 다.
1.가장 기본 적 인 경로 설정
우선 vue-router 를 설치 해 야 하 는데,어떻게 설치 하 는 지 는 말 하지 않 겠 습 니 다.
vue-router 를 설치 하 는 데 성공 하면 프로젝트 파일 의 src 에'router'폴 더 가 나타 납 니 다.이 폴 더 에는 index.js 가 있 습 니 다.router 에 대한 설정 은 주로 여기 서 완 료 됩 니 다.
在这里插入图片描述
이 를 열 고 routes 배열 에서 설정 합 니 다.한 페이지 의 길 은 이 배열 에서 하나의 대상 으로 집합 되 어 있 습 니 다.그 내 부 는 path 와 component 등 속성 을 포함 하고 URL 이 어떻게 바 뀌 는 지 에 대응 하여 어떤 반응 을 할 수 있 습 니까?
1.라 우 터/index.js 설정

//   router/index.js,  ;
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
   //       ;
]
// router4   createRouter   new VueRouter;
const router = createRouter({ 
  history: createWebHistory(process.env.BASE_URL),
  routes
  //                routes;
})

export default router   
//            router  ,
// main.js         ;
component 속성:값 은 한 페이지 입 니 다.이 페이지 컨트롤 은 미리 도입 해 야 합 니 다.
path 속성:URL 에 나타 날 때 component 속성 에 대응 하 는 페이지 로 이동 하도록 설정 합 니 다.

//   router/index.js,      ;
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import News from '../views/News.vue'
//  3     ;
const routes = [
    {
        path: '/',  /*     URL      */
        name: 'Home',
        component: Home   /*      Home   */
   },
   {
        path: '/about',/*   URL    /about    */
        name: 'About',
        component: About  /*    About */
   },
   {
        path: '/news', /*   URL    /news    */
        name: "News",
        component: News  /*    News */
   },
]
2.App.vue 설정
앞에서 url 이 서로 다른 문자 로 바 뀌 었 을 때 어떻게 점프 하 는 지 규정 되 어 있 습 니 다.이 제 는 URL 을 어떻게 바 꿀 수 있 는 지 생각해 야 합 니 다.우리 의 방식 으로 바 꿀 수 있 습 니 다.
App.vue 만 render 로 렌 더 링 되 기 때문에 처음에 본 것 과 조작 할 수 있 는 것 은 모두 App.vue 만 있 기 때문에 URL 변경 방식 에 대한 규정 은 여기 서 만 할 수 있 습 니 다.
두 가지 새로운 라벨 을 알 고 있 는데,그들 은 이미 전역 에 등록 되 었 다.

  <router-link to="  URL      ">XXX</router-link>
  //<router-link>      <a>;
  <router-view />
  //        ;
App.vue 의 모든 페이지 가에서 URL 을 바 꾸 어 작 동 합 니 다.
는 위치 표시 탭 입 니 다.router-link 탭 이 어디 에 표시 되 어야 하 는 지 규정 합 니 다.
어쨌든 네가 그것 을 지우 면 router-link 가 표시 되 지 않 을 거 야.(그것 도 중요 하지 않 아.우리 먼저 길 을 말 하 자...)

<!--    App.vue  -->
<template>
  <div id="nav">
  <!-- to        URL; -->
  <!-- Tag    router-link          HTML  ; -->
    <router-link to="/" Tag="a">Home  </router-link> |
    <router-link to="/about" Tag="a">About  </router-link> |
    <router-link to="/news" Tag="a">News  </router-link> |
    <router-link to="/login" Tag="a">Login</router-link>
  </div>
  <router-view />
</template>
그리고 당신 은npm run serve당신 의 종목 을 뛰 어 볼 수 있 습 니 다.
在这里插入图片描述
Tag 속성 에 따라 a 라벨 이 4 개 더 생 긴 것 을 볼 수 있 습 니 다.뉴스 를 눌 러 보 겠 습 니 다.
在这里插入图片描述
URL 은 router-link 의 to 속성 값 에 따라 바 뀌 었 습 니 다.페이지 가 올 바 르 게 바 뀌 었 습 니 다.
이 기본 경로 설정 이 완료 되 었 습 니 다.
2.게 으 른 로드 기술
서로 다른 경로 에 대응 하 는 구성 요 소 를 분리 하고 특정한 경로 가 실 행 될 때 만 해당 구성 요 소 를 불 러 옵 니 다.더욱 효율 적 이 고 제3자&바 텀 지지&공공 App 을 제외 하고 다른 Vue 페이지 구성 요 소 는 서버 에 있 습 니 다.요청 에 따라 페이지 에 미 치 는 영향 이 가장 적 습 니 다.
사실은 router/index.js 에서 각 구성 요소 에 대한 도입 방법 을 바 꾸 는 것 입 니 다.
화살표 함수 의 방법 으로 진행 합 니 다.

const routes = [
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
    //        About      component;
  },
  {
    path: '/news',
    name: "News",
    component: () => import("../views/News.vue")
        //        About      component;
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue')
        //        About      component;
  },
]
3.경로 삽입
우리 하위 페이지 에 링크 가 없 으 면 안 되 죠?사용 자 는 App.vue 를 통 해 하위 페이지 에 들 어 갔 고 부하 직원 의 링크 가 있어 야 합 니 다.이 는 내장 기술 이 필요 합 니 다.
간단하게 말하자면,부모 페이지 의 루트 에 하위 페이지 의 루트 를 규정 하 는 것 이다.예 를 들 어 뉴스.vue 의 루트 에 뉴스 Child-1.vue 의 루트 를 규정 하 는 것 이다.

//      router/index.js;
const routes = [
  {
    path: '/news',
    name: "News",
    component: () => import("../views/News.vue"),
    children: [
      {
        path: 'NewsChild-1', 
        //         "/"      ,
        //           ;
        //  URL  /News/NewsChild-1 ,
        //   component     ;
        component: () => import("../views/NewsChild-1"),
      }
    ]
  },
]
이렇게 하면 뉴스 페이지 에 URL 이 바 뀐 후에 해 야 할 조작 을 규정 한다.
물론 뉴스 페이지 에서 URL 을 어떻게 바 꾸 고 뉴스.vue 에 들 어가 조작 해 야 하 는 지 규정 해 야 합 니 다.

<!--   News.vue; -->
<template>
  <h1>News</h1>
  //       URL  /News/NewsChild-1;
  <router-link to="/News/NewsChild-1">NewsChild-1</router-link>
  <router-view></router-view>
</template>
그리고 렌 더 링 된 페이지 를 보 세 요.
在这里插入图片描述
링크 클릭 NewsChild-1:
在这里插入图片描述
URL 이/news/NewsChild-1 로 변경 되 었 습 니 다.router-link 의 to 속성 값 에 따라.
children 배열 에 페이지 구성 요 소 를 몇 개 더 끼 워 넣 을 수 있 습 니 다.예 를 들 어 법 적 으로 만 들 면 됩 니 다.
동적 경로
페이지 가 어디로 넘 어가 야 하 는 지 는 우리 가 프로그램 을 써 서 확인 할 수 없 는 경우 가 많 습 니 다.그러면 프로그램 이 수요 에 따라 스스로 결정 하고 경로 가 동적 으로 바 뀌 어야 합 니 다.
1.동적 경로 설정
간단하게 말하자면,우 리 는[to 가 추가 해 야 할 URL]과[path 판정 점프 URL]을 죽 이지 않 았 으 면 좋 겠 습 니 다.URL 에 자주 변화 해 야 할 부분 을 v-bind 와 export default 의 data 데 이 터 를 연결 하여 URL 이 데이터 에 따라 변동 하도록 합 니 다.

//   router/index.js
import { createRouter, createWebHashHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
  },
  {
  //         path    ;
    path: '/user/:userId',
    name: 'User',
    component: () => import('../views/User.vue'),
  }
];


<!--    App.vue  -->
<template>
  <div id="app">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <!--      v-bind userId    ; -->
    <!--  /user/        userId -->
    <router-link v-bind:to="'/user/' + userId">  </router-link>
  </div>
  <router-view />
</template>
<script>
export default {
  name: "app",
  data() {
    return {
    //     userId    baixia;
      userId: "baixia",
    };
  },
};
</script>
효과 보기:
在这里插入图片描述
다음 클릭 사용자:
在这里插入图片描述
URL 은 data 의 데이터 UserId,즉 baixia 를 성공 적 으로 연결 하 였 습 니 다.
2.동적 경로 참조
동적 경로 도 Vue 가 데 이 터 를 전달 하 는 방식 중 하나 로$route 를 이용 하여 Vue 페이지 구성 요소(즉 vue 파일)간 의 통신 을 합 니 다.
먼저 두 변 수 를 알 아 보 겠 습 니 다.
$router:index.js 끝 에 createRouter 를 이용 하여 만 든 경로 대상
$route:현재 활성 상태 에 있 는 경로 대상 입 니 다.그 중 하나의 params 속성 이 있 습 니 다.전체 이름 은 parameters 입 니 다.이 를 이용 하여 우리 URL 에서 v-bind 를 사용 하 는 값 을 찾 을 수 있 습 니 다.
예 를 들 어 User.vue 는 App.vue 의 data 중의 userId 데 이 터 를 가 져 와 야 합 니 다.

<!--  App.vue (  ) -->
<template>
  <div id="app">
    <router-link v-bind:to="'/user/' + userId">  </router-link>
  </div>
  <router-view />
</template>
<script>
export default {
  name: "app",
  data() {
    return {
      userId: "baixia",
    };
  },
};
</script>


// user.vue (  )
export default {
    name:"user",
    computed: {
        userId() {
            return this.$router.params.userId
// this.$router.param.userId  ,
// App.vue router-link    userId  ,
//       userID()  
        }
    }
}
User.vue 에서 사용자 정 보 를 얻 기 위해 사용 하 는 params 는 index.js 의 path 에 의존 하 는 속성 을 가 져 옵 니 다.path:'/user/:abc'라면 User.vue 의에 서 는 다음 과 같 아야 합 니 다.

export default {
    name:"user",
        computed: {
            userId() {
            //这里也应为获取abc属性;
                return this.$router.params.abc
           }
        }
}
총결산
어제 우리 HTML 5 디자인 대회 에서 1 등 을 했다 는 통 지 를 받 았 는데...
말 도 안 돼.잘 하 는 거 야.개인 적 으로.요 며칠 Vue 의 진 도 를 서둘러 야 겠 어.
Vue-cli 4 경로 설정 을 깊이 이해 하 는 글 은 여기까지 입 니 다.더 많은 Vue-cli 4 경로 설정 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!
vue 3+el-table 행렬 전환 실현
vue 사용자 정의 표 열 구현 프로 세 스 기록

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage