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 动态路由匹配的更多相关文章

  1. 浅谈vue之动态路由匹配

    在日常开发过程中,可能会遇到一些类似于新闻详情页的内容,需要把所有详情页映射到同一组件上,这是动态路由匹配的应用场景之一.在使用的过程中,也遇到过一些小坑,此篇做个简要的总结说明: 基本使用 { pa ...

  2. vue router动态路由

    <div id="#app"> <router-link to="/user/header">路由1</router-link&g ...

  3. Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案

    Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案   by:授客 QQ:1033553122   开发环境   Win 10   Vue 2.9.6   node-v ...

  4. Vue系列之 => 路由匹配

    路由基本使用,加动画切换 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  5. Vue-Router动态路由匹配

    //重点在于路由出口 <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- & ...

  6. vue的动态路由(登录之后拿到动态路由通过addRouters()动态添加路由)

    登录后我们拿到路由动态路由,后端传的数据可能为这个 { path: '/index', meta: { title: '首页', icon: 'icon-shouye', tab_index: , / ...

  7. 08.vue-router动态路由匹配

    动态匹配路由的基本用法 思考: <!-有如下3个路由链接.-> <router-link to="/user/1">User1</router-lin ...

  8. vue --》动态路由的实现 (根据用户的权限来访问对应的模块)

    为了设置用户的访问权限,所以在一个vue工程中,往往需要前端和后端开发人员共同配合设置动态路由, 进而实现根据用户的权限来访问对应的模块 1.首先在登录页面,前端跟据后端返回的路由信息进行配置,配置后 ...

  9. Vue router 一个路由对应多个视图

    使用命名路由 https://jsfiddle.net/posva/6du90epg/ <script src="https://unpkg.com/vue/dist/vue.js&q ...

随机推荐

  1. OpenCV 2.4.9 学习笔记(3)—— OpenCV自动为输出数组(矩阵)分配内存

    OpenCV大部分时候会为OpenCV方法中的输出数据(方法的参数)自动分配内存,所以如果一个方法的参数有一个或者多个输入数组(cv::Mat 实例)和一些输出数组时,OpenCV会自动为输出数组分配 ...

  2. UVALIVE 3031 Cable TV Network

    题意:求点联通度 首先看了别人的题解还是不晓得只枚举汇点的原因觉得行不通 关于求点联通度的建图方法 转自http://hi.baidu.com/lerroy312/item/5a5f36f2f5bba ...

  3. 我们为什么需要 lock 文件

    前言 从 Yarn 横空出世推出 lock 文件以来,已经两年多时间了,npm 也在 5.0 版本加入了类似的功能,lock 文件越来越被开发者们接收和认可.本篇文章想从前端视角探讨一下我们为什么需要 ...

  4. jQuery简单操作HTML的DOM

    #转载请留言联系 如果需要了解什么是HTML的dom,可以参考:http://www.w3school.com.cn/htmldom/index.asp 下面的是jQuery操作DOM,并不是Java ...

  5. HDU 1754.I Hate It-完全版线段树(单点替换、区间最值)

    HDU1754.I Hate It 直接模板就可以了 代码: //B #include<iostream> #include<cstdio> #include<cstri ...

  6. HDU 5923 Prediction(2016 CCPC东北地区大学生程序设计竞赛 Problem B,并查集)

    题目链接  2016 CCPC东北地区大学生程序设计竞赛 B题 题意  给定一个无向图和一棵树,树上的每个结点对应无向图中的一条边,现在给出$q$个询问, 每次选定树中的一个点集,然后真正被选上的是这 ...

  7. UVA——11988 Broken Keyboard (a.k.a. Beiju Text)

    11988 Broken Keyboard (a.k.a. Beiju Text)You’re typing a long text with a broken keyboard. Well it’s ...

  8. ANDROID模拟器访问本地WEB应用10.0.2.2

    在一般的Java Web程序开发中,我们通常使用localhost或者127.0.0.1来访问本机的Web服务,但是如果我们在Android模拟器中也采用同样的地址来访问,Android模拟器将无法正 ...

  9. MySQL索引,MySQL中索引的限制?

    MySQL中索引的限制: 1.MyISAM存储引擎引键的长度综合不能超过1000字节: 2.BLOB和TEXT类型的列只能创建前缀索引: 3.MySQL目前不支持函数索引: 4.使用!= 或者< ...

  10. 【报错】spring boot启动 报错 找不到实体类Not a managed type: class com.pisen.cloud.luna.feign.ten.beans.SysUser

    Caused by: java.lang.IllegalArgumentException: Not a managed type: class com.pisen.cloud.luna.feign. ...