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

이 글은 간단한 탐색 기능을 완성하기 위한 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 'vue-router'
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 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
//引入创建的两个组件
import Cart from './Cart.vue'
import Me from './Me.vue'
//使用路由实例插件
Vue.use(VueRouter)
const router = new VueRouter({
 mode:'history',
 base: '__dirname',
 routes:[
 //将页面组件与path指令的路由关联
 {path:'/cart',component:Cart},
 {path:'/me',component:Me}
 ]
})
new Vue({
 el: '#app',
 //将路由实例添加到Vue实例中去
 router,
 render: h => h(App)
})

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

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

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

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

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

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

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

위 코드는 예상된 것입니다. 기능이 달성되었습니다.

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

그런 다음 {path:'/cart',comComponent:를 직접 변경합니다. 장바구니}< /code>에 경로를 꺼내어 놓으면 좋지 않을까요. </p><p class="jb51code">이때 우리 vue-router는 명명된 경로라는 암시적 경로 참조 방법을 제공합니다. </p><p> 간단히 말하면 경로 이름으로 참조됩니다. Url을 대체하려면 </p><p>, VueRouter의 구성 코드는 다음과 같이 변경됩니다: </p><p><code>{path:&#39;/cart&#39;,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:'history',
 base: '__dirname',
 routes:[
 //将页面组件与path指令的路由关联
 {name:'cart',path:'/cart',component:Cart},
 {name:'me',path:'/me',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 중국어 웹사이트의 기타 관련 기사를 참조하세요!