vue-router命名路由
vue-router命名路由
为了更加方便的表示路由的路径,可以给路由规则起一个别名,即为“命名路由”。
<!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><!-- 导入 vue 文件 --><script src="./lib/vue_2.5.22.js"></script><script src="./lib/vue-router_3.0.2.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><div id="app"><router-link to="/user/1">User1</router-link><router-link to="/user/2">User2</router-link><router-link :to="{ name: 'user', params: {id: 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' },{// 命名路由name: '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>
vue-router命名路由相关推荐
- Vue Router 命名路由、(嵌套)命名视图
命名路由 在Vue Router中 除了 path 之外,还可以为任何路由提供 name. const routes = [{path: '/user/:username',name: 'user', ...
- Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战 前言 一.什么是单页面应用及实现前端路 ...
- 面试考问Vue Router 的路由模式,这个回答令我直接出局!
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
- 你真的理解 Vue Router 的路由模式吗?
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
- 面试考问Vue Router 的路由模式,这个回答令我直接出局~
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
- vue router children 路由变了 组件没变_Vue.js从零开始——路由(2)
因为一些原因,我断更了几天时间,因为要准备面试 + 不在家,抱歉大家! 题图是一个大概的 Vue 模块化项目组成,当然因为我从网上找的,所以可以忽略当中的 Bulma,这其实是一个 CSS 框架,往简 ...
- 注意避坑,Vue Router 4: 路由参数在 created/setup 时不可用
有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考 ...
- vue——router更改路由地址,但是页面不能跳转
在做电商项目时,筛选标签时,需要路由发生变化,但是当前的页面商品列表还需要局部刷新. 如果更改路由后,页面跳转,则是全局刷新,局部刷新才能够满足用户需求. 则此时要做的就是:更改路由地址,但是页面不能 ...
- vue router 的路由传参 params 和 query 的 区别
1. 不带参数<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}&qu ...
- Vue Router 路由管理
文章目录 Vue Router 路由管理 概述 安装 简单使用 定义2个组件 定义路由信息 支持路由 使用路由 动态路由 配置动态路由 配置404 限制动态参数 嵌套路由 命名路由 编程式导航 简单使 ...
最新文章
- 我在阿里做中后台开发
- 记录ie暂时遇到的问题
- 跨域请求的一种解决方案
- 【Oracle】函数简介与入门
- 在Android Studio环境下使用ESPRESSO 测试框架进行UI测试
- java 多线程同步问题_Java多线程同步问题:一个小Demo完全搞懂
- java线程之基础学习
- 百度地图移动端开发和ArcGIS for Android 开发入门
- Struts2的Maven依赖包
- 第13章 程序的动态加载和执行(二,用户代码)
- 高性能浏览器网络(High Performance Browser Networking) 第二章
- Spring之切入点表达式
- IT项目管理的三个约束条件、五个实施步骤
- Unity游戏ugui适配阿拉伯文本显示
- 新能源汽车技术与市场
- 乐鑫Esp32学习之旅 12 开源一个微信公众号airkiss配网esp32以及局域网发现功能的工程,分享一个airkiss配网小工具。(附带Demo)
- 编程狂人|后台服务架构高性能设计之道
- c语言结构体应用例程:输入今天日期,输出明天日期
- 非法本法硕最真实的就业现状
- Illegal mix of collations (utf8mb4_general_ci,IMPLICIT) and (utf8mb4_unicode_ci,IMPLICIT) for operat
热门文章
- AngularJS table 按照表头字段排序功能(升序和降序)
- SpringBoot——项目搭建、整合Mybatis、整合redis(集群)
- java构造函数使用方法总结
- UVALive 4035 - Undetectable Tour(并查集)
- CXF之webservice
- JavaWeb学习笔记——JSTL核心标签库
- 服务机器人---设计中的仿真
- Power-- 1.charge Fuel gauge
- Android驱动之 Linux Input子系统之TP——A/B(Slot)协议
- Eboot.bib中0x30000000到0x300020000内存的作用