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 ...
随机推荐
- 创建型设计模式之工厂模式(Abstract Factory)
结构 意图 提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类. 适用性 一个系统要独立于它的产品的创建.组合和表示时. 一个系统要由多个 ...
- Oracle 整理
高效分页 select * from ( select rownum r,a from yourtable order by name ) --之所以没有把<=20放在最外面,也就是我一直用的写 ...
- 安装python 科学计算库
http://www.softpedia.com/get/Programming/Other-Programming-Files/Python-x-y.shtml Pythonxy兴趣小组QQ群237 ...
- objdump
objdump -h test (show section headers) test.c #include <stdio.h> int main() { static int xxxxx ...
- Java进阶之路,技术要点
宏观方面 一.JAVA.要想成为JAVA(高级)工程师肯定要学习JAVA.一般的程序员或许只需知道一些JAVA的语法结构就可以应付了.但要成为JAVA(高级)工程师,您要对JAVA做比较深入的研究.您 ...
- Selenium2+python自动化17-JS处理滚动条【转载】
前言 selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了. 常见场景: 当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到,会报元素不可见的. 这时候 ...
- Codeforces 628 B.New Skateboard
B. New Skateboard time limit per test 1 second memory limit per test 256 megabytes input standar ...
- 「kuangbin带你飞」专题十二 基础DP
layout: post title: 「kuangbin带你飞」专题十二 基础DP author: "luowentaoaa" catalog: true tags: mathj ...
- DP【p2051(bzoj 1801)】 [AHOI2009]中国象棋.
题目描述 这次小可可想解决的难题和中国象棋有关,在一个N行M列的棋盘上,让你放若干个炮(可以是0个),使得没有一个炮可以攻击到另一个炮,请问有多少种放置方法.大家肯定很清楚,在中国象棋中炮的行走方式是 ...
- ELK帮助文档
elasticsearch: API中文指南:https://es.xiaoleilu.com/010_Intro/15_API.html 官方文档:https://www.elastic.co/cn ...