當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

动态匹配路由的基本用法||路由组件传递参数

發布時間：2025/4/16 编程问答 16 豆豆

生活随笔收集整理的這篇文章主要介紹了动态匹配路由的基本用法||路由组件传递参数小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

動態匹配路由的基本用法

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><script src="./lib/vue_2.5.22.js"></script><script src="./lib/vue-router_3.0.2.js"></script></head><body><div id="app"><router-link to="/user/1">User1</router-link><router-link to="/user/2">User2</router-link><router-link to="/user/3">User3</router-link><router-link to="/register">Register</router-link><router-view></router-view></div><script>const User = {template: '<h1>User 組件 -- 用戶id為: {{$route.params.id}}</h1>'}const Register = {template: '<h1>Register 組件</h1>'}// 創建路由實例對象const router = new VueRouter({// 所有的路由規則routes: [{ path: '/', redirect: '/user'},{ path: '/user/:id', component: User },{ path: '/register', component: Register }]})// 創建 vm 實例對象const vm = new Vue({// 指定控制的區域el: '#app',data: {},// 掛載路由實例對象// router: routerrouter})</script></body> </html>

路由組件傳遞參數

$route與對應路由形成高度耦合，不夠靈活，所以可以使用props將組件和路由解耦

1. props的值為布爾類型

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><script src="./lib/vue_2.5.22.js"></script><script src="./lib/vue-router_3.0.2.js"></script></head><body><div id="app"><router-link to="/user/1">User1</router-link><router-link to="/user/2">User2</router-link><router-link to="/user/3">User3</router-link><router-link to="/register">Register</router-link><router-view></router-view></div><script>const User = {props: ['id'],template: '<h1>User 組件 -- 用戶id為: {{id}}</h1>'}const Register = {template: '<h1>Register 組件</h1>'}// 創建路由實例對象const router = new VueRouter({// 所有的路由規則routes: [{ path: '/', redirect: '/user'},{ path: '/user/:id', component: User, props: true },{ path: '/register', component: Register }]})// 創建 vm 實例對象const vm = new Vue({// 指定控制的區域el: '#app',data: {},// 掛載路由實例對象// router: routerrouter})</script></body> </html>

2. props的值為對象類型

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><script src="./lib/vue_2.5.22.js"></script><script src="./lib/vue-router_3.0.2.js"></script></head><body><div id="app"><router-link to="/user/1">User1</router-link><router-link to="/user/2">User2</router-link><router-link to="/user/3">User3</router-link><router-link to="/register">Register</router-link><router-view></router-view></div><script>const User = {props: ['id', 'uname', 'age'],template: '<h1>User 組件 -- 用戶id為: {{id}} -- 姓名為:{{uname}} -- 年齡為：{{age}}</h1>'}const Register = {template: '<h1>Register 組件</h1>'}// 創建路由實例對象const router = new VueRouter({// 所有的路由規則routes: [{ path: '/', redirect: '/user'},{ path: '/user/:id', component: User, props: { uname: 'lisi', age: 20 } },{ path: '/register', component: Register }]})// 創建 vm 實例對象const vm = new Vue({// 指定控制的區域el: '#app',data: {},// 掛載路由實例對象// router: routerrouter})</script></body> </html>

3. props的值為函數類型

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><script src="./lib/vue_2.5.22.js"></script><script src="./lib/vue-router_3.0.2.js"></script></head><body><div id="app"><router-link to="/user/1">User1</router-link><router-link to="/user/2">User2</router-link><router-link to="/user/3">User3</router-link><router-link to="/register">Register</router-link><router-view></router-view></div><script>const User = {props: ['id', 'uname', 'age'],template: '<h1>User 組件 -- 用戶id為: {{id}} -- 姓名為:{{uname}} -- 年齡為：{{age}}</h1>'}const Register = {template: '<h1>Register 組件</h1>'}// 創建路由實例對象const router = new VueRouter({// 所有的路由規則routes: [{ path: '/', redirect: '/user' },{path: '/user/:id',component: User,props: route => ({ uname: 'zs', age: 20, id: route.params.id })},{ path: '/register', component: Register }]})// 創建 vm 實例對象const vm = new Vue({// 指定控制的區域el: '#app',data: {},// 掛載路由實例對象// router: routerrouter})</script></body> </html>

總結

以上是生活随笔為你收集整理的动态匹配路由的基本用法||路由组件传递参数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。