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><!-- :to绑定属性, 也是使用name指定路由别名, params指定参数 --><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-router命名路由
vue-router命名路由为了更加方便的表示路由的路径,可以给路由规则起一个别名,即为"命名路由". <!DOCTYPE html> <html lang=& ...
【ASP.NET MVC】路由机制：命名路由
首先看一下命名路由和没有命名的差别: 命名路由: routes.MapRoute(name: "Test", // Route nameurl: "code/p/{act ...
什么是命名路由？命名路由，命名路由意义
// 路由规则 const routes = [{path: "/",component: Layout,children: [{path: "/",name: ...
Vue3.x动态路由、命名路由和编程式导航
1.动态路由的定义和使用两种方法 : 1.路由中的动态传参以 : 进行声明,冒号后面跟的是动态参数名(path: 'apple/:mid'),通过{{ $route.params.m ...
Vue Router 命名路由、（嵌套）命名视图
命名路由在Vue Router中除了 path 之外,还可以为任何路由提供 name. const routes = [{path: '/user/:username',name: 'user', ...
【Vue路由】多级路由、路由传参、命名路由、params使用
文章目录多级路由案例实验总结路由传参案例实验总结命名路由路由的params参数多级路由案例实验我们尝试做出如下的效果: 首先项目结构: 我们直接看四个路由组件: About.vu ...
vue编程式导航，命名路由
//使用 window.location.href 的形式,叫做编程式导航绑定事件的形式 <template><div class="goods-item" ...
Django-安装/分组命名/路由分发
一.安装Django 命令行窗口: pycharm安装: 二.创建Django项目命令行窗口创建项目: 访问地址: 表示访问成功注意如果我们在命令行窗口创建的应用需要我们手动的在django的se ...
前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由二.动态路由+路由嵌套+404页面三. 编程式导航四.命名路由五.命名视图六.重定向和起别名 1.重定向 2.起别名 ...

030_vue命名路由

030_vue命名路由相关推荐

最新文章

热门文章