const User = {
template: '<div>User{{ $route.params.id }}</div>'
} const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
//多段『路径参数』,对应的值都会设置到 $route.params 中
/user/:username/post/:post_id
//路由参数变化,组件复用时,可以用watch处理

const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
}
或者使用beforeRouteUpdate
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}

同一个路径可以匹配多个路由,谁先定义的,谁的优先级就最高。

vue-router-2-动态路由配置的更多相关文章

  1. vue动态路由配置,vue路由传参

    动态路由: 当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个"共用"的组件,并且还要传参数,渲染不同的数据 这就要用到动态路 ...

  2. Nacos下动态路由配置

    前言 Nacos最近项目一直在使用,其简单灵活,支持更细粒度的命令空间,分组等为麻烦复杂的环境切换提供了方便:同时也很好支持动态路由的配置,只需要简单的几步即可.在国产的注册中心.配置中心中比较突出, ...

  3. vue+iview实现动态路由和权限验证

    github上关于vue动态添加路由的例子很多,本项目参考了部分项目后,在iview框架基础上完成了动态路由的动态添加和菜单刷新.为了帮助其他需要的朋友,现分享出实现逻辑,欢迎一起交流学习. Gith ...

  4. 从壹开始 [vueAdmin后台] 之三 || 动态路由配置 & 项目快速开发

    回顾 今天VS 2019正式发布,实验一波,你安装了么?Blog.Core 预计今天会升级到 Core 3.0 版本. 哈喽大家周三好!本来今天呢要写 Id4 了,但是写到了一半,突然有人问到了关于 ...

  5. Cisco动态路由配置

    前言: 学完静态路由配置,该学动态路由.所以 学习完后来做终结. 准备: PC:192.168.1.10 R1:fa0/0 192.168.1.1 fa0/1 1.1.12.1 R2: fa0/0 1 ...

  6. 交换路由中期测验20181226(动态路由配置与重分发、NAT转换、ACL访问控制列表)

    测试拓扑: 接口配置信息 HostName 接口 IP地址 网关 Server 0 Fa0 172.16.15.1/24 172.16.15.254 Server 1 Fa0 100.2.15.200 ...

  7. vue.js利用vue.router创建前端路由

    node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...

  8. Cisco基础(二):三层交换vlan间通信、多交换机vlan间通信、三层交换配置路由、RIP动态路由配置、三层交换配置RIP动态路由

    一.三层交换vlan间通信 目标: VLAN实现了广播域的隔离,同时也将VLAN间的通信隔离了.三层交换技术使得VLAN间可以通信. 通过三层交换实现VLAN间通信 方案: 为了解决了传统路由器低速. ...

  9. vue前后分离动态路由和权限管理方案

    需求 需要根据不同的角色来显示不同的菜单 问题 系统是前后分离模式开发的,出现了后端接口和前端路由都需要权限管理. 思路 后端的接口肯定得验证权限 在前端做好组件名和组件的映射 前端的路由通过后端发回 ...

  10. vue系列之动态路由【原创】

    开题 最近用vue来构建了一个小项目,由于项目是以iframe的形式嵌套在别的项目中的,所以对于登录的验证就比较的麻烦,索性后端大佬们基于现在的问题提出了解决的方案,在看到他们的解决方案之前,我先画了 ...

随机推荐

  1. 荧光原位杂交技术 RNA-FiSH (fluorescence in situ hybridization)

    通俗理解:带有荧光标记的DNA探针可以用于检测活体内特定基因的表达情况,活体成像. 荧光原位杂交方法是一种物理图谱绘制方法,使用荧光素标记探针,以检测探针和分裂中期的染色体或分裂间期的染色质的杂交.荧 ...

  2. webService上传图片

    webService /// <summary> /// 上传图片webServer 的摘要说明 /// </summary> [WebService(Namespace = ...

  3. 进程状态TASK_UNINTERRUPTIBLE

    进程拥有以下几种状态:就绪/运行状态.等待状态(可以被中断打断).等待状态(不可以被中断打断).停止状态和僵死状态. TASK_RUNNING: 正在运行或处于就绪状态:就绪状态是指进程申请到了CPU ...

  4. node模块之path——path.join和path.resolve的区别

    1.path.join([...paths]) path.join() 方法使用平台特定的分隔符把全部给定的 path 片段连接到一起,并规范化生成的路径. 长度为零的 path 片段会被忽略. 如果 ...

  5. Leetcode 1013. 总持续时间可被 60 整除的歌曲

    1013. 总持续时间可被 60 整除的歌曲  显示英文描述 我的提交返回竞赛   用户通过次数450 用户尝试次数595 通过次数456 提交次数1236 题目难度Easy 在歌曲列表中,第 i 首 ...

  6. Java 8 forEach

    1. forEach and Map 1.1 通常这样遍历一个Map Map<String, Integer> items = new HashMap<>(); items.p ...

  7. css层叠性冲突中的优先级

    一.首先从CSS级别来进行优先级划分: CSS控制页面样式的四种方法: 1.行内样式 通过style特性 <p style=”color:#F00; background:#CCC; font- ...

  8. Boosting

    Boosting is a greedy alogrithm. The alogrithm works by applying the weak learner sequentially to wei ...

  9. Vue 项目骨架屏注入与实践

    作为与用户联系最为密切的前端开发者,用户体验是最值得关注的问题.关于页面loading状态的展示,主流的主要有loading图和进度条两种.除此之外,越来越多的APP采用了“骨架屏”的方式去展示未加载 ...

  10. django学习之——我的 Hello World

    pycharm 打开django 创建的项目:添加views.py文件 修改 urls.py from django.conf.urls import patterns, include, url f ...