vue 获取路由的参数，并判断是否为某一特定值

前提环境：webpack

（1）路由的配置在router下的index.js文件中配置路由及参数

本例以子路由为主：path:'/HelloWorld/engine/:id',name: 'engine',component:engine

此处的id为路由参数，前面的内容为路径。

export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
children:[
{path:'/HelloWorld/engine/:id',name: 'engine',component:engine},
]
}
]

})

（2）在对应的router-link相关的vue文件中引用

配置跳转路由为："path":'/HelloWorld/engine/2'

<router-link :to="{ path: operate.path}"></router-link>

此处的path要保持一致，此处2是id参数的具体值；

（3）在router-view要显示的内容的vue文件下获取router路径参数

（4）在（3）的基础上用v-if判断是否和n一致

$route.params.id获取的就是（1）中的id参数的内容。

我是路由{{n}}

</p>

data中的数据： n:2

vue 获取路由的参数，并判断是否为某一特定值相关推荐

vue 替换路由地址参数（动态修改路由参数）
1.此种方式适用于直接替换已存在的路由参数值,无需新增或删除路由参数: 在项目中,比如进入我的订单页面,订单页面有不同的几个菜单,如:待付款.待发货.待收货.待收货等: 我们想要实现从不同的菜单点击进 ...
vue获取浏览器地址栏参数(?及/)路由+非路由实现方式
1.? 参数浏览器参数形式:http://javam4.com/m4detail?id=1322914793170014208 1.1.路由取参方式 this.$route.query.id 前端跳 ...
ajax 微信code获取_获取链接的参数，判断是否是微信打开，ajax获取数据
//获取链接参数 function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "= ...
vue获取当前路由/path地址
vue获取路由的参数方法: 使用:this.$route.path即可获取到,如下: let router_path = this.$route.path console.log(router_pat ...
vue 获取请求url_vue 获取url里参数的两种方法小结
我就废话不多说了,大家还是直接看代码吧~ 第一种: const query = Qs.parse(location.search.substring(1)) let passport = query. ...
express获取url路由地址参数的方法获取get请求参数
用express写接口我觉得是非常快的,直接集成好了. 下面来说说express获取路由地址参数的方法. var express=require('express'); var app=express ...
vue的路由踩坑坑……之路（＜router-link/＞，＜router-view/＞）之router-link跳转时浏览器的路径是正确的，而router-view却不渲染数据？？？
为什么我的router-link跳转时浏览器的路径是正确的,而router-view却--为什么不渲染数据???这个问题我纠结了好几个小时..到最后,真真真--(无语子) 先上图,看目录: 我的目录长 ...
vue取url路径传参_vue不通过路由直接获取url中参数的方法示例
前言众所周知vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接在url后面拼接?mid=100的方 ...
【vue】Vue路由获取路由参数
vue路由设置路由参数有2种方式: 1.通过query配置: <router-link :to="{ name:'login',query:{id:1} }">登录&l ...

vue 获取路由的参数，并判断是否为某一特定值

vue 获取路由的参数，并判断是否为某一特定值相关推荐

最新文章

热门文章