vue 获取路由的参数,并判断是否为某一特定值
前提环境:webpack (1)路由的配置在router下的index.js文件中配置路由及参数 本例以子路由为主:path:'/HelloWorld/engine/:id',name: 'engine',component:engine 此处的id为路由参数,前面的内容为路径。export default new Router({ routes: [ { p
前提环境: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路径参数
{{$route.params.id}}
{{$route.path}}
(4)在(3)的基础上用v-if判断是否和n一致
$route.params.id获取的就是(1)中的id参数的内容。
<p v-if="$route.params.id==n">
我是路由{{n}}</p>
data中的数据: n:2
更多推荐
所有评论(0)