动态路由匹配/:
2020-03-12 本文已影响0人
混吃等死小前端
动态路由就是在路由路径中使用“动态路径参数”
简单理解为在路径后面加上
/:xx
//router.js
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:ids', component: User }
]
})
//about.vue
<template>
<div class="about">
<h1>{{this.$route.params}}</h1>
</div>
</template>
如上面的例子，参数为
id，其值可以通过路由对象$route中的params属性来获取。
假设路径为http://localhost:8080/#/about/123，123则为动态路由参数，页面显示如下
image.png
设置多段‘路径参数’方法一样：
path: '/about/:ids/child/:name'
假设路径为http://localhost:8080/#/about/123/child/admin，参数为123和admin，页面显示如下
image.png
