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. lua中产生 1 - n 之间不重复随机数

    local function GetRandomNumList(len) local rsList = {} ,len do table.insert(rsList,i) end local num, ...

  2. HeadFirst Ruby 第十章总结 Comparable & Enumerable

    导言 这一章的标题是 Ready-Made Mixes, 也就是 Ruby 已经准备好的用于 Mix-in 的 Modules, 它们是: Comparable 和 Enumerable, Compa ...

  3. 20170928xlVBA自定义分类汇总

    SubtotalByCQL Range("A1:E100").Value, "Select 1,2,Sum(4),Count(4) GroupBy 1,2", ...

  4. Android Studio 一直卡在building解决办法

    1.随便找一个你能运行的as项目 2.打开gradle-wrapper.properties,文件目录:项目/gradle/wrapper/gradle-wrapper.properties 3.复制 ...

  5. vux 给元素动态添加css

    <template> <div class="jdtI" :style="{styleObj}"></div> </t ...

  6. 2.3 UML活动图

    活动图定义 活动图描述了在一个过程中,顺序的/并行的活动及其之间的关系 应用于商业过程.工作流(业务过程).复杂算法的建模 活动图是顶点和弧的集合 活动节点 动作 流 对象值 注解和约束等 活动图基本 ...

  7. Find a way HDU - 2612

    Pass a year learning in Hangzhou, yifenfei arrival hometown Ningbo at finally. Leave Ningbo one year ...

  8. Excel文件的读写

    import xlsxwriter,xlrd import sys,os.path fname = 'zm6.xlsx' if not os.path.isfile(fname): print ('文 ...

  9. harbor安装

    一.下载安装包https://github.com/goharbor/harbor/releases wget https://storage.googleapis.com/harbor-releas ...

  10. 4月18 数据库的CRUD操作

    php主要是实现B/S Brower Server;此外还有C/S:Client Server暂时不考虑: LAMP: Linux系统 A阿帕奇服务器 Mysql数据库 Php语言,而现在学的是在wi ...