Le processus de routage de Vue Router est simplement trié (étapes d'utilisation)

Avant-propos

Installez-le d'abordVue CLI

1. Qu'est-ce que le routage ?

site officiel chinois de vue-router : https://router.vuejs.org/zh/

Vue Router est le gestionnaire de routage officiel de Vue.js. Il est profondément intégré au cœur de Vue.js, ce qui facilite la création d'applications d'une seule page. Le routage peut en fait être compris comme un pointage, c'est-à-dire que lorsque je clique sur un bouton de la page, je dois accéder à la page correspondante. C'est le saut de routage

Tout d'abord, apprenons trois mots (itinéraire, itinéraires, routeur) ; :

Itinéraire : Tout d'abord, c'est un nombre singulier, traduit par itinéraire, c'est-à-dire que nous pouvons le comprendre comme un itinéraire unique ou un certain itinéraire

itinéraires : C'est un nombre pluriel, ce qui signifie qu'une collection ; de multiples peut être pluriel ; c'est-à-dire que nous pouvons le comprendre comme une collection de plusieurs routes, il n'existe que deux formes de collections représentant plusieurs états différents dans JS : les tableaux et les objets. En fait, la définition officielle des routes est un tableau ; nous rappelons donc que les routes représentent une collection de plusieurs tableaux ;

router : traduit par routeur, Ce qui précède sont toutes des routes, et celui-ci est un routeur. Nous pouvons le comprendre comme un conteneur contenant les deux ci-dessus, ou c'est un gestionnaire. responsable de la gestion des deux ci-dessus ; prenons un exemple de scénario courant : lorsque l'utilisateur clique sur un bouton de la page, à ce moment-là, le routeur ira aux routes pour trouver la route, ce qui signifie que le routeur ira à la collection de routes pour trouver l'itinéraire correspondant ; [Recommandation associée : Tutoriel vidéo vue.js]

2. Étapes d'utilisation

1. Créer un projet

Après l'installation du projet, le répertoire du projet est le suivant :

. 2. Installez le routage

Ouvrez le fichier package.json sous le projet et vérifiez la version de vue.
La version de vue est 2.x. Il est recommandé à vue-router d'installer la version 3.x.
La version de vue est 3.x. Il est recommandé à vue-router d'installer la version 4.x.

Entrez ensuite la commande dans le répertoire du projet

npm install vue-router@版本号

3. Créer des fichiers

Ouvrez le dossier src et créez les fichiers suivants (certains sont créés par défaut)

1.Fichier HelloWorld.vue

Ce fichier est créé par défaut Pour faciliter la démonstration, le code redondant a été supprimé

<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 file

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

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

<style>
</style>

3.index.js file

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

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

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

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

4.main.js file

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

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

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>

3. Exécutez le projet

1. Ouvrez cmd sous le fichier du projet et entrez Yarn Serve

2. Ouvrez le navigateur et visitez http://localhost:8080/.

3. Cliquez sur HelloWorld, la page n'a pas besoin d'être actualisée, passez à http://localhost:8080/#/hw

4. Cliquez sur Test, la page n'a pas besoin d'être actualisée. pour être rafraîchi, accédez à http://localhost : 8080/#/test

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!