개시하다

좋은 아침입니다.안녕하세요.안녕하세요.
나루터입니다.
이번에는 지난번 베일을 이어가는 거야.나는 계속해서 js를 하고 싶다.
오늘은 Vue-router입니다.
그럼, 우리 빨리 보러 갑시다.
공식 사이트

차리다

※ 설치 시 "Vue-router가 있나요?"그래서'있다'를 선택하면 마음대로 들어갈 수 있다.

설치 후 기본적으로 필요한 설정은 자동으로 진행되므로 이 항목을 추가해 주십시오.
router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  mode: 'history', //追加
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

기본 비헤이비어는 URL#에 포함되지만 지정mode:history을 통해 URL에서 제거#할 수 있습니다.

src/pages 디렉터리를 만듭니다.

화면 이동을 위한 vu 파일을 여기에 저장합니다.

src
└── pages
    ├── top.vue
    ├── about.vue
    └── contact.vue

사용법

router/index.js에 경로를 등록합니다.

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//----------追加---------------
import Top from '@/pages/top'
import About from '@/pages/about'
import Content from '@/pages/content'
//-----------------------------

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    //----------追加---------------
    {
      path: '/top',
      name: 'Top',
      component: Top
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/content',
      name: 'Content',
      component: Content
    },
    //----------------------------------
  ]
})

<해설>

import コンポーネント名 from 'ページ遷移で呼ばれるvueファイルのパス'

및

{
    path: '宛先パス'
    (name: コンポーネント名)
    conponent コンポーネント名
}
※()は省略化

[TIPS]

※ import 문장@의 의미
build/webpack.base.conf.js

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

여기에 적힌 '@':resolve ('src ')' 는 'import 문장의 문자열이 @로 시작할 때 src/디렉터리의 경로로 처리됩니다.' 라는 뜻이다.

화면 마이그레이션

템플릿에 다음 내용을 기술해 주십시오.
App.vue

<template>
  <div id="app">
    <div class="header">
      <!--/////////////追加//////////////-->
      <router-link to="/">
        home
      </router-link>
      <router-link to="/top">
        top
      </router-link>
      <router-link to="about">
        about
      </router-link>
      <router-link to="content">
        content
      </router-link>
      <!--///////////////////////////////-->
    </div>
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

여기서 중요한 건요.

<router-link to="/">home</router-link>

네.
템플릿에서 구문을 설명하면 변환됩니다.
※ 는 로 렌더링됩니다.변환 목적지를 to 속성의 값으로 지정합니다.그리고 또 하나는요.<router-view/> 이 탭 부분은 대상 vue의 이미지를 표시합니다. 404페이지로 전환하는 방법roter/index.jsimport Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Top from '@/pages/top'; import About from '@/pages/about'; import Content from '@/pages/content'; //-------추가---- import NotFound from '@/pages/error/404.vue' //----------------------------- Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/top', name: 'Top', component: Top }, { path: '/about', name: 'About', component: About }, { path: '/content', name: 'Content', component: Content }, //-------추가---- //추가 path: '*', name: 'notFound', component: NotFound } //---------------------------------- ] }) 모든 일치하는 라우팅은 라우팅에 정의되지 않은 모든 URL에 대한 요청을 가져오는 라우팅입니다.정의되지 않은 모든 경로를 그곳에 전달해 보세요. [TIPS] router.push를 사용한 마이그레이션<router-link> →→→→→→ 506100;,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,.router.push를 사용하면 프로그램에서 동적 변환을 할 수 있습니다.this.$router.push('/'); 추기(2019/12/05) 매개변수가 있는 변환 방법 Vue; 해발 379.예를 들어 블로그의 일람 페이지에서 "ID:1"의 글 상세 페이지를 읽고 싶을 때가 있다.<router-link v-bind:to="{ name : 'Detail', params : { id: 1}}"> router/index.js{ path: '/detail/:id', name: 'Detail', component: Detail } 위에서 설명한 대로 매개변수 "1"을 더하면 Detail 페이지로 이동할 수 있습니다.이상. 마지막으로 재난이 발생했다.만약 잘못이 있으면 건의하고 지적하면 저에게 알려주세요.Vue.js에 대한 기초 (기본 문법),Vue.왜냐하면 js에 대한 기초를 썼거든요.
가능하면 이쪽도 봐주세요.
다음은 Vuex 및 Nuxt입니다.js와 Type Script에 대해 접할 수 있었으면 좋겠어요.