vue-cli에서 라우터를 사용하는 방법

이 글은 주로 vue-cli 라우터의 기본 사용법을 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있기를 바랍니다.

1. src 디렉토리에 새로운 router 디렉토리를 생성한 후 index.js를 생성합니다

import Vue from 'vue';
import VueRouter from 'vue-router';
import goods from '@/components/goods/goods';

Vue.use(VueRouter);

export default new VueRouter({
 routes: [
  {
   path: '/',
   redirect: {name: 'goods'}
  }
});

코드의 @는 webpack.base.conf.js에서 수정한 설정으로, 파일을 도입하는 것이 목적입니다. 매번 컴포넌트 등 상대 경로를 작성하는 것이 너무 번거로우므로 대신 @를 사용하세요. 구성 수정은 다음과 같습니다

 resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@': resolve('src'),
  }
 }

2. 항목 파일 main.js에 도입하고 노드에 마운트합니다

import router from './router';

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: &#39;<App/>&#39;,
 components: { App }
});

3 예를 들어 .vue 파일에 사용된 앱에서 경로를 전환하려면 클릭하세요. 그러면 콘텐츠가 라우터 뷰 컨테이너에 표시됩니다

<template>
 <p id="app">
  <p class="tab">
    <router-link to="/goods" >商品</router-link>
  </p>
  <router-view></router-view>
 </p>
</template>

다음과 같이 세 번 클릭하면 경로가 전환됩니다. 제품, 판매자 및 댓글, 현재 클릭한 노드를 설정하고 싶습니다. 스타일을 설정할 수 있습니다

.router-link-active {color: rgb(139,0,0);}

관련 권장 사항:

vue-router 라우팅 기본 인스턴스 공유

Router 크로스 모듈에서 페이지 점프 해결

vue 라우터는 Tmall 하단 탐색 모음 예시 공유를 모방합니다

위 내용은 vue-cli에서 라우터를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!