vue-router 动态路由匹配
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
},
{
//动态路由
path: '/HelloWorld2/:id',
name: 'HelloWorld2',
component: HelloWorld2,
},
{
path: '/HelloWorld3',
name: 'HelloWorld3',
component: HelloWorld3,
},
],
mode: 'history'
});
methods:{
handleIncrease(){
this.$store.commit('increase',5);
},
handleDecrease(){
this.$store.commit('decrease',5);
},
handleAsyncIncrease(){
this.$store.dispatch('asyncIncrease');
},
handleRouter () {
//实现跳转的方式2
this.$router.push('/HelloWorld2/123');
},
showRouter (){
console.log(this.$router);
console.log(this.$router.push);
}
}
<!--显示参数-->
{{$route.params.id}}
vue-router 动态路由匹配的更多相关文章
- 浅谈vue之动态路由匹配
在日常开发过程中,可能会遇到一些类似于新闻详情页的内容,需要把所有详情页映射到同一组件上,这是动态路由匹配的应用场景之一.在使用的过程中,也遇到过一些小坑,此篇做个简要的总结说明: 基本使用 { pa ...
- vue router动态路由
<div id="#app"> <router-link to="/user/header">路由1</router-link&g ...
- Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案
Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案 by:授客 QQ:1033553122 开发环境 Win 10 Vue 2.9.6 node-v ...
- Vue系列之 => 路由匹配
路由基本使用,加动画切换 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- Vue-Router动态路由匹配
//重点在于路由出口 <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- & ...
- vue的动态路由(登录之后拿到动态路由通过addRouters()动态添加路由)
登录后我们拿到路由动态路由,后端传的数据可能为这个 { path: '/index', meta: { title: '首页', icon: 'icon-shouye', tab_index: , / ...
- 08.vue-router动态路由匹配
动态匹配路由的基本用法 思考: <!-有如下3个路由链接.-> <router-link to="/user/1">User1</router-lin ...
- vue --》动态路由的实现 (根据用户的权限来访问对应的模块)
为了设置用户的访问权限,所以在一个vue工程中,往往需要前端和后端开发人员共同配合设置动态路由, 进而实现根据用户的权限来访问对应的模块 1.首先在登录页面,前端跟据后端返回的路由信息进行配置,配置后 ...
- Vue router 一个路由对应多个视图
使用命名路由 https://jsfiddle.net/posva/6du90epg/ <script src="https://unpkg.com/vue/dist/vue.js&q ...
随机推荐
- SQL联合查询(内联、左联、右联、全联)语法
SQL联合查询(内联.左联.右联.全联)语法 概述: 联合查询效率较高,举例子来说明联合查询:内联inner join .左联left outer join .右联right outer join ...
- strtol函數的用法 atof, atoi, atol, strtod, strtoul
相关函数: atof, atoi, atol, strtod, strtoul表头文件: #include <stdlib.h>定义函数: long int strtol(const ch ...
- c++和G++的区别
今天被g++坑死了.. 网上找了一段铭记:引自 http://www.cnblogs.com/dongsheng/archive/2012/10/22/2734670.html 1.输出double类 ...
- 使用webView的时候,出现Error loading page Domain:WebKitErrorDomain Error Code:101 Description: The URL can't be shown
onShouldStartLoadWithRequest = (e) => {// Implement any custom loading logic here, don't forget t ...
- 磁盘镜像工具Guymager
磁盘镜像工具Guymager 在数字取证中,经常需要对磁盘制作镜像,以便于后期分析.Kali Linux提供一款轻量级的磁盘镜像工具Guymager.该工具采用图形界面化方式,提供磁盘镜像和磁盘克 ...
- 洛谷 P4551 最长异或路径
题目描述 给定一棵 nn 个点的带权树,结点下标从 11 开始到 NN .寻找树中找两个结点,求最长的异或路径. 异或路径指的是指两个结点之间唯一路径上的所有节点权值的异或. 输入输出格式 输入格式: ...
- [Contest20180418]物理竞赛
题意:在一个三维空间中有一个轴,轴上有一个垂直于轴的半径为$R$的凸透镜(光心在轴上)和$n$个点光源,假设每个点光源发出的$1$单位光都刚好覆盖凸透镜,现在有一个半径为$r$的圆形光屏,问光屏最多能 ...
- 第九章 Android-UI组件(2)
一.图像视图(ImageView) 布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayo ...
- MySQL命令show full processlist
processlist命令的输出结果显示了有哪些线程在运行,可以检查当前数据库的运行状态,两种方式使用这个命令. 1 进入MySQL/bin目录下输入mysqladmin processlist; 2 ...
- 关于asp.net mvc中 weiui gallery中IOS 下不显示预览图片问题的解决方式
IOS 下面不显示预览. 结果去掉了红框中的缓存部分 就可以显示了 备忘,也帮助一下需要的朋友 @*<meta http-equiv="pragma" content=&qu ...