当前位置：首页 > 前端技术 > vue >内容正文

vue

030_vue命名路由

发布时间：2025/5/22 vue 80 豆豆

生活随笔收集整理的这篇文章主要介绍了 030_vue命名路由小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1. 命名路由

1.1. 命名路由, 通过name属性给当前路由指定一个别名user_alias。

1.2. :to绑定属性, 也是使用name指定路由别名, params指定参数。

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>'};// 创建路由实例对象var router = new VueRouter({routes: [{ path: '/', redirect: '/user/3' },{ // 命名路由, 通过name属性给当前路由指定一个别名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. 效果图

总结

以上是生活随笔为你收集整理的030_vue命名路由的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。

路由
_vue