vue动态路由匹配实例

来源：互联网发布：js如何获取classname 编辑：程序博客网时间：2024/06/04 19:44
<!doctype html><html><head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <title>Document</title>    <script src="https://unpkg.com/vue/dist/vue.js"></script>    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script></head><body><div id="app">    <h1>Hello App!</h1>    <p>        此处 必须是 :to        <router-link :to="{name:'test',params:{ id:userInfo[0].idd }}">测试</router-link>     这里idd只是示例，可以是任意字段    </p>    <!-- 路由出口 -->    <!-- 路由匹配到的组件将渲染在这里 -->    <router-view></router-view></div><script>    // 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)    // 1. 定义（路由）组件。    // 可以从其他文件 import 进来    const User = {        template: '<div>{{this.$route.params.id}}</div>'    }    const router = new VueRouter({        routes: [            // 动态路径参数 以冒号开头            {                name:"test",                path: '/user/:id',                component: User            }        ]    })    const app = new Vue({        router,        data(){            return {                userInfo:[                    {                        idd:"test1"                    },                    {                        idd:"test2"                    }                ]            }        }    }).$mount('#app')</script></body></html>
阅读全文
0 0