vue-router를 사용하여 간단한 탐색 기능 완성-JS 튜토리얼-php.cn

vue-router를 사용하여 간단한 탐색 기능 완성

不言

풀어 주다： 2018-06-29 11:33:04

원래의

1706명이 탐색했습니다.

이 글은 간단한 탐색 기능을 완성하기 위한 vue-router의 사용을 주로 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다.

vue- router Vue.js에서 공식적으로 제공하는 전용 라우팅 도구 라이브러리입니다. 이 글에서는 간단한 네비게이션 기능을 완성하기 위해 vue-router를 사용하는 방법을 주로 소개합니다. 필요한 친구들은 참고하시면 됩니다

vue-router는 Vue.js에서 공식적으로 제공하는 전용 라우팅 도구 라이브러리입니다#🎜🎜 #

설치 명령은 다음과 같습니다

npm i vue-router -D

로그인 후 복사

vue-router 인스턴스는 Vue 플러그인입니다. Vue 전역 참조에서 Vue를 전달하려면 .use()를 Vue 인스턴스에 연결합니다.

우리 프로젝트에서는 main.js가 기본 프로그램 항목 파일이며 모든 전역 구성이 이 파일에서 수행됩니다.

main.js에 다음 참조를 추가합니다

import VueRouter from &#39;vue-router&#39;
Vue.use(VueRouter)

로그인 후 복사

이로 vue-router 기본 설치가 완료됩니다. 일했다.

다음으로 구현하려는 기능은 다음과 같습니다

홈페이지에는 장바구니 링크와 개인센터 링크가 2개 있습니다
#🎜 🎜# 다른 콘텐츠를 표시하려면 다른 링크를 클릭하세요
먼저 src 디렉터리에 두 개의 구성 요소 파일을 만듭니다. Cart.vue Me.vue

New 내용 두 구성 요소 파일 중 현재는 구성 요소 간의 일치 규칙이 동일합니다.

VueRouter의 정의는 매우 간단합니다. VueRouter 인스턴스를 생성하고 구성 요소 유형에 대한 라우팅 경로를 지정합니다.

다음 코드(main.js)에 표시된 대로 #🎜 🎜## 🎜🎜#

<template>
 <!-- 这个p里面的内容可设置不同以区分 -->
 <p>购物车</p>
</template>
<script>
export default {}
</script>
<style lang="scss"></style>

로그인 후 복사

위의 라우팅 관련 코드를 추출하여 다른 Routes.js 파일에 넣어서 main.js의 내용이 누출되지 않도록 할 수 있습니다. 파일이 점점 길어지고 있습니다.

새 구성 폴더를 만들고 여기에 Route.js 파일을 추가하세요.

Routes.js 코드는 다음과 같습니다

import Vue from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import VueRouter from &#39;vue-router&#39;
//引入创建的两个组件
import Cart from &#39;./Cart.vue&#39;
import Me from &#39;./Me.vue&#39;
//使用路由实例插件
Vue.use(VueRouter)
const router = new VueRouter({
 mode:&#39;history&#39;,
 base: &#39;__dirname&#39;,
 routes:[
 //将页面组件与path指令的路由关联
 {path:&#39;/cart&#39;,component:Cart},
 {path:&#39;/me&#39;,component:Me}
 ]
})
new Vue({
 el: &#39;#app&#39;,
 //将路由实例添加到Vue实例中去
 router,
 render: h => h(App)
})

로그인 후 복사

그러면 main.js 파일 코드가 줄어듭니다 다음으로:

import Vue from &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;
//引入创建的两个组件
import Cart from &#39;../Cart.vue&#39;
import Me from &#39;../Me.vue&#39;
//使用路由实例插件
Vue.use(VueRouter)
const router = new VueRouter({
 mode:&#39;history&#39;,
 base: &#39;__dirname&#39;,
 routes:[
 //将页面组件与path指令的路由关联
 {path:&#39;/cart&#39;,component:Cart},
 {path:&#39;/me&#39;,component:Me}
 ]
})
export default router;

로그인 후 복사

vue-router는 두 개의 명령 태그를 제공합니다.

< router -view> : 렌더링 경로와 일치하는 뷰 구성 요소

<router-link> : 사용자가 라우팅 기능을 사용하여 애플리케이션에서 탐색할 수 있도록 지원합니다.

명령 태그를 사용하면 프로그램 입구 App.vue에 해당 코드를 작성할 수 있습니다.

import Vue from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import router from &#39;./config/routes&#39;
new Vue({
 el: &#39;#app&#39;,
 //将路由实例添加到Vue实例中去
 router,
 render: h => h(App)
})

로그인 후 복사

위 코드는 예상된 것입니다. 기능이 달성되었습니다.
그런 다음 필요한 경우 ="/cart"에 대한 경로가 실제로 {path:'/cart',comComponent:Cart}에 정의되어 있음을 알 수 있습니다. 수정하려면 이 두 곳을 동시에 수정해야 합니다(다른 곳에서 사용하는 경우 더 변경하세요)

그런 다음 {path:'/cart',comComponent:를 직접 변경합니다. 장바구니}< /code>에 경로를 꺼내어 놓으면 좋지 않을까요. 이때 우리 vue-router는 명명된 경로라는 암시적 경로 참조 방법을 제공합니다. 간단히 말하면 경로 이름으로 참조됩니다. Url을 대체하려면 , VueRouter의 구성 코드는 다음과 같이 변경됩니다: <code>{path:'/cart',component:Cart}定义过了，如果需要修改，就得需要这两个地方同时修改（如果有其他地方用的就改动的更多）

那么直接将{path:'/cart',component:Cart}中的路径取出来岂不是很好。

这个时候我们的 vue-router提供了一种隐式的路由引用方式，称之为 —— 命名路由

简单来说就是通过路由的名称引用来取代Url

于是VueRouter的配置代码改为如下：

<template>
 <p id="app">
 <p class="tabs">
  <ul>
  <li>
   <router-link to ="/cart">
   <p>购物车</p>
   </router-link>
  </li>
  <li>
   <router-link to ="/me">
   <p>个人中心</p>
   </router-link>
  </li>
  </ul>
 </p>
 <p class="content">
  <!-- 使用 router-view 渲染视图 -->
  <router-view></router-view>
 </p>
 </p>
</template>
<script>
export default {
 name: "app"
};
</script>
<style lang="scss"></style>

로그인 후 복사

这样我们在 <router-link >

const router = new VueRouter({
 mode:&#39;history&#39;,
 base: &#39;__dirname&#39;,
 routes:[
 //将页面组件与path指令的路由关联
 {name:&#39;cart&#39;,path:&#39;/cart&#39;,component:Cart},
 {name:&#39;me&#39;,path:&#39;/me&#39;,component:Me}
 ]
})

로그인 후 복사

이런 식으로 우리는 <router-link>의 to 속성은 v-bind를 사용하여 Vue 인스턴스에 바인딩된 다음

이라는 이름을 통해 Url을 직접 얻습니다. App.vue의 link 부분은 다음과 같이 코드가 변경됩니다.

  <li>
   <router-link :to ="{name:&#39;cart&#39;}">
   <p>购物车</p>
   </router-link>
  </li>
  <li>
   <router-link :to ="{name:&#39;me&#39;}">
   <p>个人中心</p>
   </router-link>
  </li>

로그인 후 복사

이쯤 되면 vue를 이용한 간단한 네비게이션 기능이 완성됩니다. -router

Instructions# 🎜🎜#

<router-link>는 기본적으로 올바른 링크가 있는 태그로 렌더링됩니다. 태그 속성

예:

  <li>
   <router-link :to ="{name:&#39;cart&#39;}" tag="span">
   <p>购物车</p>
   </router-link>
  </li>

로그인 후 복사

위 내용은 이 글의 전체 내용입니다. . 더 많은 관련 내용을 보시려면 PHP 중국어 웹사이트를 주목해주세요!

관련 권장 사항:
vue가 Element 구성 요소를 사용할 때 v-for 루프의 양식 항목 확인 방법 정보

# 🎜 🎜#Vue는 입력 줄 수를 고정하고 텍스트 영역에 밑줄 스타일을 추가하는 아이디어를 구현합니다

#🎜 🎜#

#🎜🎜 #

위 내용은 vue-router를 사용하여 간단한 탐색 기능 완성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

vue-router를 사용하여 간단한 탐색 기능 완성