Proses penghalaan Vue Router hanya diisih (langkah penggunaan)

Kata Pengantar

Mula-mula pasang dahuluVue CLI

1.

vue-router Laman web rasmi Cina: https://router.vuejs.org/zh/

Vue Router ialah pengurus penghalaan rasmi Vue.js. Ia disepadukan secara mendalam dengan teras Vue.js, menjadikannya mudah untuk membina aplikasi satu halaman. Penghalaan sebenarnya boleh difahami sebagai penunjuk, iaitu, apabila saya mengklik butang pada halaman, saya perlu melompat ke halaman yang sepadan Ini adalah lompatan penghalaan

Pertama sekali, mari belajar tiga perkataan (. laluan, laluan, penghala ):

laluan: Pertama sekali, ia adalah nombor tunggal, diterjemahkan sebagai laluan, iaitu, kita boleh memahaminya sebagai satu laluan atau laluan tertentu; >laluan: Ia adalah nombor jamak, menunjukkan bahawa koleksi gandaan boleh menjadi nombor Plural, iaitu, kita boleh memahaminya sebagai koleksi berbilang laluan . Sebenarnya, takrifan rasmi laluan ialah tatasusunan, jadi kami ingat bahawa laluan mewakili pelbagai koleksi tatasusunan

penghala: diterjemahkan sebagai penghala, di atas adalah semua laluan, ini adalah penghala, kita boleh memahaminya sebagai bekas yang mengandungi dua di atas atau ia adalah pengurus, bertanggungjawab untuk menguruskan dua di atas sebagai contoh Contoh senario biasa: apabila pengguna mengklik butang pada halaman, penghala akan pergi ke laluan untuk mencari; laluan, yang bermaksud bahawa penghala akan pergi ke koleksi laluan untuk mencari laluan yang sepadan; [Cadangan berkaitan:

tutorial video .js

]2 🎜>

1. Buat projek

Selepas memasang projek, direktori projek adalah seperti berikut:

2

Buka fail package.json di bawah projek dan semak versi vue. Versi vue ialah 2.x. Adalah disyorkan agar vue-router memasang versi 3.x. Versi vue ialah 3.x. Adalah disyorkan agar vue-router memasang versi 4.x.

Kemudian masukkan arahan


3 Cipta fail

npm install vue-router@版本号

Buka folder src dan buat fail berikut (beberapa. dicipta secara lalai)

1.Fail HelloWorld.vue
Fail ini dicipta secara lalai Untuk kemudahan demonstrasi, kod berlebihan dipadamkan

Fail 2.Test.vue

<template>
  <div class="hello">
    <h1 id="HelloWorld">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>

fail 3.index.js

<template>
	<div>
		<h2 id="Test">Test</h2>
	</div>
</template>

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

<style>
</style>

fail 4.main.js

// 引入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

5.Fail App.vue

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')

3 Jalankan projek

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

1. Buka cmd di bawah fail projek dan masukkan yarn serve

2 Buka penyemak imbas dan lawati http://localhost:8080/

3. Klik HelloWorld, halaman tidak perlu dimuat semula, lompat ke http://localhost:8080/#/hw

4. Klik Test , halaman tidak perlu dimuat semula , lompat ke http://localhost:8080/#/test

Atas ialah kandungan terperinci Proses penghalaan Vue Router hanya diisih (langkah penggunaan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!