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. Linux Mint---安装docky

    这个安装的时候没啥难度,直接在软件中心安装一下就可以了,效果很赞的,linux下最棒的dock, 简洁大方,效果好! 只不有过一点需要注意,这个东东直接很上拖是添加不上去的 需要从/usr/share ...

  2. vue-cli打包后图片路径取不到的问题

    今天准备把vue-cli build 的文件发到服务器上单发现会出现图片找不到的问题 解决办法如下 修改 assetsPublicPath: './' .打开webpack.prod.conf.js, ...

  3. Promotion Counting(USACO)

    题目翻译: zxyer来到了一个神奇的公司工作,之所以神奇,是因为这个公司的员工的职位并不与他们的水平相称,有的职位极低的职员的经验非常丰富,而有些经理甚至老板都是个萌新.有一天,zxyer收到了老板 ...

  4. gluPerspective(解释得很好)

    http://www.cppblog.com/COOOOOOOOL/archive/2009/12/28/104255.html 函数原型gluPerspective(GLdouble fovy,GL ...

  5. "select一直返回0"的问题解决和总结

    场景:一个简单的TCP 服务器,以实现UPNP的事件体系结构 我在linux平台下,创建一个TCP套接字,绑定到49156端口,向UPNP SERVER发一个subscribe订阅请求,超时时间设置为 ...

  6. zlib、libzip、 libzippp 库编译(windows + cmake + vs2013)

    "libzipp" 这库是基于 "libzip" 之上封装的,而 "libzip" 又是基于 "zlib"库封装的,所以 ...

  7. zabbix 硬盘状态收集,制作表格

    将zabbix首页复制到a文件里,这里主要是用到首页里 最近出现的问题 的信息 # -*- coding:utf-8 -*- import time import os from openpyxl i ...

  8. Fiddler抓包6-get请求(url详解)【转载】

    本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/fiddler/ 前言 上一篇介绍了Composer的功能,可以模拟get和post请求 ...

  9. linq连接sqlite数据库(linq to sqlite) .net3.5

    http://www.cnblogs.com/xianyin05/archive/2012/12/23/2829905.html using Models; using System; using S ...

  10. 牛客网 暑期ACM多校训练营(第一场)A.Monotonic Matrix-矩阵转化为格子路径的非降路径计数,Lindström-Gessel-Viennot引理-组合数学

    牛客网暑期ACM多校训练营(第一场) A.Monotonic Matrix 这个题就是给你一个n*m的矩阵,往里面填{0,1,2}这三种数,要求是Ai,j⩽Ai+1,j,Ai,j⩽Ai,j+1 ,问你 ...