Vue Router 라우팅 프로세스가 간단하게 정리됩니다(사용 단계)-View.js-php.cn

Vue Router 라우팅 프로세스가 간단하게 정리됩니다(사용 단계)

藏色散人

풀어 주다： 2022-08-10 16:28:56

앞으로

2356명이 탐색했습니다.

머리말

먼저 설치해 보세요Vue CLI

1. 라우팅이란 무엇인가요?

vue-router 중국 공식 웹사이트: https://router.vuejs.org/zh/

Vue Router는 Vue.js의 공식 라우팅 관리자입니다. Vue.js의 핵심과 긴밀하게 통합되어 단일 페이지 애플리케이션을 쉽게 구축할 수 있습니다. 라우팅은 실제로 가리키는 것으로 이해될 수 있습니다. 즉, 페이지의 버튼을 클릭하면 해당 페이지로 이동해야 합니다. 이것이 라우팅 점프입니다.

먼저 세 단어(route, Routes, Router)를 배워보겠습니다. :

경로: 우선 단수이며 경로로 번역됩니다. 즉, 단일 경로 또는 특정 경로로 이해할 수 있습니다.

경로: 복수형이므로 모음을 의미합니다. of multiples는 복수형일 수 있습니다. 즉, 여러 경로의 컬렉션으로 이해할 수 있습니다. JS에는 여러 가지 상태를 나타내는 두 가지 형태의 컬렉션만 있습니다. 실제로 경로의 공식 정의는 배열입니다. 따라서 경로는 여러 배열의 모음을 나타낸다는 것을 기억합니다.

라우터: 라우터로 번역됩니다. 위는 모두 경로이고 이것은 위의 두 가지를 포함하는 컨테이너 또는 관리자로 이해할 수 있습니다. 위의 두 가지 관리를 담당합니다. 일반적인 시나리오의 예를 들어 보겠습니다. 사용자가 페이지의 버튼을 클릭하면 이때 라우터는 경로를 찾기 위해 경로로 이동합니다. 즉, 라우터는 경로 수집으로 이동합니다. 해당 경로 찾기 [관련 추천: vue.js 비디오 튜토리얼]

2. 사용 단계

1. 프로젝트 생성

프로젝트 설치 후 프로젝트 디렉토리는 다음과 같습니다.
Vue Router 라우팅 프로세스가 간단하게 정리됩니다(사용 단계)

2. 라우팅 설치

프로젝트 아래 package.json 파일을 열고 vue 버전을 확인하세요.
vue 버전은 2.x입니다. vue-router는 3.x 버전을 설치하는 것이 좋습니다.
vue 버전은 3.x입니다. vue-router는 4.x 버전을 설치하는 것이 좋습니다.
Vue Router 라우팅 프로세스가 간단하게 정리됩니다(사용 단계)
그런 다음 프로젝트 디렉터리에 명령을 입력하세요

npm install vue-router@版本号

로그인 후 복사

3. 파일 만들기

src 폴더를 열고 다음 파일을 만듭니다(일부는 기본적으로 생성됩니다)
Vue Router 라우팅 프로세스가 간단하게 정리됩니다(사용 단계)

1.HelloWorld.vue 파일

이 파일은 데모의 편의를 위해 중복된 코드를 삭제했습니다

<template>
  <div class="hello">
    <h1>HelloWorld</h1>
  </div>
</template>

<script>
export default {
  name: &#39;HelloWorld&#39;,
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

로그인 후 복사

2.Test.vue 파일

<template>
	<div>
		<h2>Test</h2>
	</div>
</template>

<script>
	// 导出
	export default {
		name: &#39;TestItem&#39;
	}
</script>

<style>
</style>

로그인 후 복사

3.index.js 파일

// 引入vue
import Vue from &#39;vue&#39;;
// 引入vue-router
import VueRouter from &#39;vue-router&#39;;
// 注册 第三方库需要use一下才能用
Vue.use(VueRouter)
// 引入HelloWorld页面
import HelloWorld from &#39;../components/HelloWorld.vue&#39;
// 引入Test页面
import Test from &#39;../components/Test.vue&#39;

// 定义routes路由的集合，数组类型
const routes=[
    //单个路由均为对象类型，path代表的是路径，component代表组件
    {path:&#39;/hw&#39;,component:HelloWorld},
    {path:"/test",component:Test}
]

// 实例化VueRouter并将routes添加进去
const router = new VueRouter({
// ES6简写，等于routes：routes
    routes
});

// 抛出这个这个实例对象方便外部读取以及访问
export default router

로그인 후 복사

4.main.js 파일

import Vue from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import router from &#39;./router/index.js&#39;
// 阻止vue在启动时生成的生产提示
Vue.config.productionTip = false

new Vue({
  	router: router,
	render: h => h(App),
}).$mount(&#39;#app&#39;)

로그인 후 복사

5. App.vue File

<template>
  <div id="app">
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/hw">HelloWorld</router-link>
    <router-link to="/test">Test</router-link>
    <hr>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: &#39;App&#39;,
}
</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>

로그인 후 복사