Vue-Router2实现路由功能实例讲解
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。
注意：vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。
推荐使用npm安装。
npm install vue-router
一、使用路由
在main.js中，需要明确安装路由功能：
import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' Vue.use(VueRouter)
1.定义组件，这里使用从其他文件import进来
import index from './components/index.vue' import hello from './components/hello.vue'
2.定义路由
const routes = [
{ path: '/index', component: index },
{ path: '/hello', component: hello },
]3.创建 router 实例，然后传 routes 配置
const router = new VueRouter({
routes
})4.创建和挂载根实例。通过 router 配置参数注入路由，从而让整个应用都有路由功能
const app = new Vue({
router,
render: h => h(App)
}).$mount('#app')经过上面的配置之后呢，路由匹配到的组件将会渲染到App.vue里的
那么这个App.vue里应该这样写：
<template> <p id="app"> <router-view></router-view> </p> </template>
index.html里呢要这样写：
<body> <p id="app"></p> </body>
这样就会把渲染出来的页面挂载到这个id为app的p里了。
二、重定向 redirect
const routes = [
{ path: '/', redirect: '/index'}, // 这样进/ 就会跳转到/index
{ path: '/index', component: index }
]三、嵌套路由
const routes = [
{ path: '/index', component: index,
children: [
{ path: 'info', component: info}
]
}
]通过/index/info就可以访问到info组件了
四、懒加载
const routes = [
{ path: '/index', component: resolve => require(['./index.vue'], resolve) },
{ path: '/hello', component: resolve => require(['./hello.vue'], resolve) },
]通过懒加载就不会一次性把所有组件都加载进来，而是当你访问到那个组件的时候才会加载那一个。对于组件比较多的应用会提高首次加载速度。
五、
在vue-router 1中，使用的是
在vue-router 2中，使用了
<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home" rel="external nofollow" >Home</a>
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>六、路由信息对象
1.$route.path
字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。
2.$route.params
一个 key/value 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象。
3.$route.query
一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。
4.$route.hash
当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。
5.$route.fullPath
完成解析后的 URL，包含查询参数和 hash 的完整路径。
6.$route.matched
一个数组，包含当前路由的所有嵌套路径片段的 路由记录 。路由记录就是 routes 配置数组中的对象副本（还有在 children 数组）。
综合上述，一个包含重定向、嵌套路由、懒加载的main.js如下：
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
Vue.use(VueRouter)
const router = new VueRouter({
routes:[
{ path: '/', redirect: '/index' },
{ path: '/index', component: resolve => require(['./components/index.vue'], resolve),
children:[
{ path: 'info', component: resolve => require(['./components/info.vue'], resolve) }
]
},
{ path: '/hello', component: resolve => require(['./components/hello.vue'], resolve) },
]
})
const app = new Vue({
router,
render: h => h(App)
}).$mount('#app')相关推荐：
Atas ialah kandungan terperinci Vue-Router2实现路由功能实例讲解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Apakah fungsi apl Doubao?
Mar 01, 2024 pm 10:04 PM
Akan terdapat banyak fungsi penciptaan AI dalam apl Doubao, jadi apakah fungsi apl Doubao? Pengguna boleh menggunakan perisian ini untuk membuat lukisan, berbual dengan AI, menjana artikel untuk pengguna, membantu semua orang mencari lagu, dsb. Pengenalan fungsi apl Doubao ini boleh memberitahu anda kaedah operasi khusus Kandungan khusus ada di bawah, jadi lihat! Apakah fungsi apl Doubao Jawapan: Anda boleh melukis, bersembang, menulis artikel dan mencari lagu. Pengenalan fungsi: 1. Pertanyaan soalan: Anda boleh menggunakan AI untuk mencari jawapan kepada soalan dengan lebih pantas, dan anda boleh bertanya apa-apa jenis soalan. 2. Penjanaan gambar: AI boleh digunakan untuk mencipta gambar yang berbeza untuk semua orang Anda hanya perlu memberitahu semua orang keperluan umum. 3. Sembang AI: boleh mencipta AI yang boleh berbual untuk pengguna,
Perbezaan antara vivox100s dan x100: perbandingan prestasi dan analisis fungsi
Mar 23, 2024 pm 10:27 PM
Kedua-dua telefon bimbit vivox100s dan x100 adalah model yang mewakili dalam barisan produk telefon mudah alih vivo, masing-masing mewakili tahap teknologi canggih vivo dalam tempoh masa yang berbeza. Artikel ini akan menjalankan perbandingan terperinci antara kedua-dua telefon mudah alih ini dari segi perbandingan prestasi dan analisis fungsi untuk membantu pengguna memilih telefon mudah alih yang sesuai dengan mereka dengan lebih baik. Mula-mula, mari kita lihat perbandingan prestasi antara vivox100s dan x100. vivox100s dilengkapi dengan yang terbaru
Apakah sebenarnya media kendiri? Apakah ciri dan fungsi utamanya?
Mar 21, 2024 pm 08:21 PM
Dengan perkembangan pesat Internet, konsep media kendiri telah berakar umbi dalam hati orang ramai. Jadi, apakah sebenarnya media kendiri? Apakah ciri dan fungsi utamanya? Seterusnya, kita akan meneroka isu-isu ini satu demi satu. 1. Apakah sebenarnya media kendiri? Kami-media, seperti namanya, bermakna anda adalah media. Ia merujuk kepada pembawa maklumat yang melaluinya individu atau pasukan boleh mencipta, mengedit, menerbitkan dan menyebarkan kandungan secara bebas melalui platform Internet. Berbeza dengan media tradisional, seperti akhbar, televisyen, radio, dan lain-lain, media kendiri lebih interaktif dan diperibadikan, membolehkan semua orang menjadi pengeluar dan penyebar maklumat. 2. Apakah ciri dan fungsi utama media kendiri? 1. Ambang rendah: Peningkatan media kendiri telah menurunkan ambang untuk memasuki industri media Peralatan yang rumit dan pasukan profesional tidak lagi diperlukan.
Apakah fungsi perisian pengurusan akaun Xiaohongshu? Bagaimana untuk mengendalikan akaun Xiaohongshu?
Mar 21, 2024 pm 04:16 PM
Memandangkan Xiaohongshu menjadi popular di kalangan golongan muda, semakin ramai orang mula menggunakan platform ini untuk berkongsi pelbagai aspek pengalaman dan pandangan hidup mereka. Cara mengurus berbilang akaun Xiaohongshu dengan berkesan telah menjadi isu utama. Dalam artikel ini, kami akan membincangkan beberapa ciri perisian pengurusan akaun Xiaohongshu dan meneroka cara mengurus akaun Xiaohongshu anda dengan lebih baik. Apabila media sosial berkembang, ramai orang mendapati diri mereka perlu mengurus berbilang akaun sosial. Ini juga merupakan satu cabaran untuk pengguna Xiaohongshu. Sesetengah perisian pengurusan akaun Xiaohongshu boleh membantu pengguna mengurus berbilang akaun dengan lebih mudah, termasuk penerbitan kandungan automatik, penerbitan berjadual, analisis data dan fungsi lain. Melalui alatan ini, pengguna boleh mengurus akaun mereka dengan lebih cekap dan meningkatkan pendedahan dan perhatian akaun mereka. Di samping itu, perisian pengurusan akaun Xiaohongshu mempunyai
Apa itu Discuz? Definisi dan pengenalan fungsi Discuz
Mar 03, 2024 am 10:33 AM
"Meneroka Discuz: Definisi, Fungsi dan Contoh Kod" Dengan perkembangan pesat Internet, forum komuniti telah menjadi platform penting untuk orang ramai mendapatkan maklumat dan bertukar pendapat. Di antara banyak sistem forum komuniti, Discuz, sebagai perisian forum sumber terbuka yang terkenal di China, digemari oleh majoriti pembangun dan pentadbir laman web. Jadi, apa itu Discuz? Apakah fungsi yang ada padanya, dan bagaimana ia boleh membantu tapak web kami? Artikel ini akan memperkenalkan Discuz secara terperinci dan melampirkan contoh kod khusus untuk membantu pembaca mengetahui lebih lanjut mengenainya.
Petua PHP: Cepat Laksanakan Kembali ke Fungsi Halaman Sebelumnya
Mar 09, 2024 am 08:21 AM
Tip PHP: Cepat melaksanakan fungsi kembali ke halaman sebelumnya Dalam pembangunan web, kita sering menghadapi keperluan untuk melaksanakan fungsi kembali ke halaman sebelumnya. Operasi sedemikian boleh meningkatkan pengalaman pengguna dan memudahkan pengguna menavigasi antara halaman web. Dalam PHP, kita boleh mencapai fungsi ini melalui beberapa kod mudah. Artikel ini akan memperkenalkan cara cepat melaksanakan fungsi kembali ke halaman sebelumnya dan memberikan contoh kod PHP tertentu. Dalam PHP, kita boleh menggunakan $_SERVER['HTTP_REFERER'] untuk mendapatkan URL halaman sebelumnya
Penjelasan terperinci tentang fungsi dan fungsi GDM di bawah Linux
Mar 01, 2024 pm 04:18 PM
Penjelasan terperinci tentang fungsi dan fungsi GDM di bawah Linux Dalam sistem pengendalian Linux, GDM (GNOMEDisplayManager) ialah pengurus log masuk grafik yang menyediakan antara muka untuk pengguna log masuk dan log keluar daripada sistem. GDM biasanya merupakan sebahagian daripada persekitaran desktop GNOME, tetapi boleh digunakan oleh persekitaran desktop lain juga. Peranan GDM bukan sahaja untuk menyediakan antara muka log masuk, tetapi juga termasuk pengurusan sesi pengguna, penyelamat skrin, log masuk automatik dan fungsi lain. Fungsi GDM terutamanya merangkumi aspek berikut:
PHP digunakan untuk apa? Terokai peranan dan fungsi PHP
Mar 24, 2024 am 11:39 AM
PHP ialah bahasa skrip bahagian pelayan yang digunakan secara meluas dalam pembangunan web Fungsi utamanya adalah untuk menjana kandungan web yang dinamik Apabila digabungkan dengan HTML, ia boleh mencipta halaman web yang kaya dan berwarna-warni. PHP berkuasa Ia boleh melaksanakan pelbagai operasi pangkalan data, operasi fail, pemprosesan borang dan tugas lain, menyediakan interaktiviti dan fungsi yang berkuasa untuk tapak web. Dalam artikel berikut, kami akan meneroka lebih lanjut peranan dan fungsi PHP, dengan contoh kod terperinci. Mula-mula, mari kita lihat penggunaan biasa PHP: penjanaan halaman web dinamik: P
