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 ...
随机推荐
- 转载:C++ 多继承和虚继承的内存布局
C++ 多继承和虚继承的内存布局[已翻译100%] 英文原文:Memory Layout for Multiple and Virtual Inheritance 标签: <无> run_ ...
- Inline Hook
@author: dlive IAT Hook时如果要钩取的API不在IAT中(LoadLibrary后调用),则无法使用该技术.而Inline Hook不存在这个限制. 0x01 Inline Ho ...
- 8.OpenStack网络组件
添加网络组件 安装和配置控制器节点 创建数据库 mysql -uroot -ptoyo123 CREATE DATABASE neutron; GRANT ALL PRIVILEGES ON neut ...
- python cProfile分析程序性能
转自:http://xianglong.me/article/analysis-python-application-performance-using-cProfile/?utm_source=tu ...
- 阿里的iptables,保存一份
# Generated by iptables-save v1.4.7 on Fri Apr 14 16:37:31 2017 *filter :INPUT ACCEPT [0:0] :FORWARD ...
- Ubuntu16.10 +python3.5+Tensorflow 1.1
1.python版本检查 因为Ubuntu16.10已经默认安装了python2.7 和 3.5,检查python版本, 如果为python2.7,那么就需要我们设置python3.5为默认版本. 查 ...
- 洛谷 P1048 采药【裸01背包】
题目描述 辰辰是个天资聪颖的孩子,他的梦想是成为世界上最伟大的医师.为此,他想拜附近最有威望的医师为师.医师为了判断他的资质,给他出了一个难题.医师把他带到一个到处都是草药的山洞里对他说:" ...
- centos 部署web项目
Linux下安装Tomcat服务器和部署Web应用 一.上传Tomcat服务器
- Closest Binary Search Tree Value -- LeetCode
Given a non-empty binary search tree and a target value, find the value in the BST that is closest t ...
- pyttsx的中文语音识别问题及探究之路
最近在学习pyttsx时,发现中文阅读一直都识别错误,从发音来看应该是字符编码问题,但搜索之后并未发现解决方案.自己一路摸索解决,虽说最终的原因非常可笑,大牛们可能也是一眼就能洞穿,但也值得记录一下. ...