动态路由

动态路由：

类型一：

在访问一个url时，url上面可以带参数，如：/news/4

// name表示给当前路由规则起一个名字
// /about/:id 配置动态路由
{path:"/about/:id",name:"about",component:About},

在about中怎么获取参数：

<script>
    export default {
        name: "About",

        created() { // created是一个生命周期函数
            // 获取url中的动态参数
            console.log(this.$route.params.id)
        }
    }
</script>

类型二：

 {path:"/mine/:name/:age/:sex",name:"mine",component: Mine}

怎么获取参数：（然后在模板中使用即可）

<script>
    export default {
        name: "Home",
        data(){
            return{
                name:"",
                age:0,
                sex:"",
            }
        },
        created() {
            // console.log(this.$route.params)
            this.name = this.$route.params.name;
            this.age = this.$route.params.age;
            this.sex = this.$route.params.sex;
        }
    }
</script>

类型三

// meta:{address:"bj"} 当访问路由时，可以获取meta中的数据
 {path:"/mine/:name/:age/:sex",name:"mine",component: Mine,meta:{address:"bj"}}

获取参数：

created() {
console.log(this.$route.meta.address)
}