vue动态路由匹配实例

丶天道酬勤丶

4154人浏览 · 2017-11-21 10:15:37

丶天道酬勤丶 · 2017-11-21 10:15:37 发布

<!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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^