055——VUE中vue-router之路由参数的随意设置与伪静态链接地址处理：

2024-02-03 14:34•css•阅读 3565

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>vue-router之路由参数的随意设置与伪静态链接地址处理：</title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>
<div >
    <router-link to="/content">链接</router-link>
    <br/>
    <router-view></router-view>
</div>
<script type="text/x-template" >
    <div>
        cid:{{$route.params.cid}}----id:{{$route.params.id}}
        <br/>
        <button @click="show">点击按钮</button>
    </div>
</script>
<script>
    const content = {
        template: "#content",
        methods: {
            show() {
                console.log(this.$route.params);
            }
        }
    }
    let routes = [
        {path: '/content/:cid/show/:id', component: content}
    ]
    let router = new VueRouter({routes});
    new Vue({
        el: "#demo",
        router
    });
</script>
</body>

</html>

　　地址：http://localhost/vueTest/055.html#/content/11/show/22

上一篇 »vue题目
下一篇 »vue 之动态路由，填坑