vue-router2.0动态路由获取参数
一下demo演示2.0中的vue-router是如何获取到不同参数的,并在地址栏中匹配不同的信息
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.min.js"></script>
</head> <body>
<div id="box">
<!-- 跳转路径 -->
<router-link to="/home">home</router-link>
<router-link to="/news">news</router-link>
<div>
<router-view></router-view>
</div>
</div>
<script type="text/javascript">
var News = {
template:`
<div>
<h3>新闻</h3>
<router-link to="/news/yule/article/001">娱乐频道</router-link>
<router-link to="/news/zhibo/article/002">直播频道</router-link>
<div><router-view></router-view></div>
</div>
`
}; var User = {
template: '<p>获取到数据:{{$route.params}}</p>'
}; var Home = {
template: '<h3>主页</h3>'
};
// 配置路由
var jump = [{
path: '/home',
component: Home
}, {
path: '/news',
component: News,
// 配置子路由
children:[{
// 冒号后面的数据可获取是动态的
path:':tv/article/:num',
component:User
}]
}, {
path: '*',
redirect: '/home'
}];
// 创建实例
var router = new VueRouter({
routes: jump
});
// 挂载实例
var app = new Vue({
el: '#box',
router: router
})
</script>
</body> </html>
vue-router2.0动态路由获取参数的更多相关文章
- Nuxt配置动态路由以及参数校验
动态路由就是带参数的路由.比如我们商品列表里很多商品详细页,这时候就需要动态路由的帮助了. 比如我们新建一个commodity文件夹,新建一个index.vue 文件,然后新建一个_id.vue (以 ...
- vue+iview实现动态路由和权限验证
github上关于vue动态添加路由的例子很多,本项目参考了部分项目后,在iview框架基础上完成了动态路由的动态添加和菜单刷新.为了帮助其他需要的朋友,现分享出实现逻辑,欢迎一起交流学习. Gith ...
- Vue跳转相同路由不同参数,解决页面数据不自动刷新
参考: https://www.cnblogs.com/ainyi/p/9340311.html https://blog.csdn.net/weixin_41888813/article/detai ...
- vue 页面间使用路由传参数,刷新页面后获取不到参数的问题
情况 情况再简单说明一下: 有三个页面(a-列表页面,b-内页1,c-内页2),页面a->页面b->页面c有参数传递.从a进入b后,刷新b页面拿不到a页面传进来的参数.或者b页面再进入c页 ...
- vue前后分离动态路由和权限管理方案
需求 需要根据不同的角色来显示不同的菜单 问题 系统是前后分离模式开发的,出现了后端接口和前端路由都需要权限管理. 思路 后端的接口肯定得验证权限 在前端做好组件名和组件的映射 前端的路由通过后端发回 ...
- vue系列之动态路由【原创】
开题 最近用vue来构建了一个小项目,由于项目是以iframe的形式嵌套在别的项目中的,所以对于登录的验证就比较的麻烦,索性后端大佬们基于现在的问题提出了解决的方案,在看到他们的解决方案之前,我先画了 ...
- vue-router动态路由设置参数可选
在日常工作中,我们需要将匹配到的所有路由,映射到一个组件上. 如下代码想要达到的效果: 不传page和id,则映射到user默认list页面 传page和id,根据page不同,显示不同的页面 问题 ...
- VUE -- router 传参和获取参数
- vue 动态路由 Get传值
main.js //2.配置路由 注意:名字 const routes = [ { path: '/home', component: Home }, { path: '/news', compone ...
随机推荐
- IE兼容问题及处理
1.在IE6下,子元素能撑开父级设置好的宽高 2.IE6下的最小高度,高度小于19px的元素在IE6下会被当做19px来处理 解决办法:overflow:hidden; 3.IE6下 不支持1px的点 ...
- 【Zookeeper】源码分析之请求处理链(二)
一.前言 前面学习了请求处理链的RequestProcessor父类,接着学习PrepRequestProcessor,其通常是请求处理链的第一个处理器. 二.ZooKeeper源码分析 2.1 类的 ...
- GridControl基础设置(一)
1. 如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 2. 如何新增一条记录 (1).gridView.Ad ...
- netflix ribbon概述
LB方案分类 目前主流的LB方案可分成两类:一种是集中式LB, 即在服务的消费方和提供方之间使用独立的LB设施(可以是硬件,如F5, 也可以是软件,如nginx), 由该设施负责把访问请求通过某种策略 ...
- Algorithms(4th)谢路云译大纲总结(附实现源码)
前言: 此算法书可以说是Java程序开发者的福音.里面涉及近50种计算机领域的经典算法,几位作者花了近40年的时间才完成这本著作.秉着对作者的敬仰与对算法的兴趣,我多次翻阅此书,而且常常被书中的经典算 ...
- MySQL主从复制与主主复制
1.简介 MySQL作为世界上使用最为广泛的数据库之一,免费是其原因之一.但不可忽略的是它本身的功能的确很强大.随着技术的发展,在实际的生产环境中,由单台MySQL数据库服务器不能满足实际的需求.此时 ...
- 解释 : translate 功能,过程
本来预计是这样设计的 admin在增加内容时,如:添加新的地点或新的FAQ,这时需要有中文,马来文等,但是顾客通常是不会添加的,所以这部分就不给顾客添加或更改. 用户来到前台,先看看localstor ...
- List实现行转列的通用方案
最近在做报表统计方面的需求,涉及到行转列报表.根据以往经验使用SQL可以比较容易完成,这次决定挑战一下直接通过代码方式完成行转列.期间遇到几个问题和用到的新知识这里整理记录一下. 阅读目录 问题介绍 ...
- recyclerview item点击事件
recyclerview早就不陌生了,比起过去传统的listView,样式更多,也较为高效一点,这里整理一下recylerview中item的点击事件. recyclerview和listView不同 ...
- 【《Effective C#》提炼总结】提高Unity中C#代码质量的21条准则
作者:Williammao, 腾讯移动客户端开发工程师 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. 原文链接:http://wetest.qq.com/lab/view/290.h ...