vue动态路由匹配实例

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>Documenttitle>
    <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: '
{{this.$route.params.id}}
'
} 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>

你可能感兴趣的:(js,vue)