當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

030_vue命名路由

發(fā)布時間：2025/5/22 vue 68 豆豆

生活随笔收集整理的這篇文章主要介紹了 030_vue命名路由小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1. 命名路由

1.1. 命名路由, 通過name屬性給當(dāng)前路由指定一個別名user_alias。

1.2. :to綁定屬性, 也是使用name指定路由別名, params指定參數(shù)。?

1.3.?代碼?

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>命名路由</title></head><body><div id="app"><router-link to="/user/1">User1</router-link><router-link to="/user/2">User2</router-link><router-link :to="{ name: 'user_alias', params: {id: 3} }">User3</router-link><router-link to="/register">Register</router-link><router-view></router-view></div><script type="text/javascript" src="vue.min.js"></script><script src="vue-router_3.0.2.js"></script><script type="text/javascript">var user = {props: ['id', 'uname', 'age'],template: '<h1>User組件 -- 用戶id為: {{id}} -- 姓名為: {{uname}} -- 年齡為: {{age}}</h1>'};var register = {template: '<h1>Register組件</h1>'};// 創(chuàng)建路由實例對象var router = new VueRouter({routes: [{ path: '/', redirect: '/user/3' },{ // 命名路由, 通過name屬性給當(dāng)前路由指定一個別名user_aliasname: 'user_alias',path: '/user/:id', component: user, props: route => ({ uname: 'zs', age: 20, id: route.params.id }) },{ path: '/register', component: register }]});var vm = new Vue({el: "#app",router: router});</script></body> </html>

1.4.?效果圖

總結(jié)

以上是生活随笔為你收集整理的030_vue命名路由的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

路由
_vue