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. MFC does not support WINVER less than 0x0501 解决方案(转)

    原文转自 http://blog.csdn.net/ygzhong000/article/details/41750841 解决方案:在stdafx.h头文件中添加以下行. #define WINVE ...

  2. 阿里云服务器上使用apt-get install出现404 Not Found

    阿里云服务器上使用apt-get install出现404 Not Found 刚申请了的阿里云服务器,在其Ubuntu上用apt-get install安装软件时,会遇到 Failed to fet ...

  3. 检查URL Protocol是否安装的项目

    https://github.com/ismailhabib/custom-protocol-detection

  4. Jquery学习之路(一) 实现checkbox全选方法

    昨天早上有写到怎么利用Jquery实现全选 根据大家的意见对程序中一些写法不好的地方进行了修改,也是本人水平有限,存在各种考虑不到的地方. 文章最后我提出了一个问题,要写一个通用的方法来调用,于是就有 ...

  5. 计蒜客 28315.Excellent Engineers-线段树(单点更新、区间最值) (Benelux Algorithm Programming Contest 2014 Final ACM-ICPC Asia Training League 暑假第一阶段第二场 E)

    先写这几道题,比赛的时候有事就只签了个到. 题目传送门 E. Excellent Engineers 传送门 这个题的意思就是如果一个人的r1,r2,r3中的某一个比已存在的人中的小,就把这个人添加到 ...

  6. (3)oracle建用户、建表、权限、命名空间

    一.表空间 创建表空间 create tablespace  ts001  datafile ‘d:\test\a.dbf’ size 20m uniform size 128k; 使用表空间 cre ...

  7. UVALive(LA) 4487 Exclusive-OR(带权并查集)

    题意:对于n个数X[0]~X[n-1],但你不知道它们的值,通过逐步提供给你的信息,你的任务是根据这些信息回答问题,有三种信息如下: I p  v : Xp = v;    Xp 的值为v I p q ...

  8. springboot的配置文件

    一.springboot配置文件值的注入 @ConfigurationProperties(prefix = "xxx") 实例代码: @Component @Configurat ...

  9. view hex value in MR

    cat filename | hexdump  –C tail  -行数 filename | hexdump  –C head -行数 filename | hexdump -C

  10. (转)unity3d加密资源并缓存加载

    http://www.haogongju.net/art/1931680 首先要鄙视下unity3d的文档编写人员极度不负责任,到发帖为止依然没有更新正确的示例代码. view source   pr ...