vue-cli(Vue-Router)动态路径参数

6

每一个页面就是一个路由,假如有1000个用户,岂不是又1000个页面,但是显示的内容其实差别都是不大的,那么我们怎么实现复用了,这个时候,我们就可以用到Vue-Router中的动态…

每一个页面就是一个路由,假如有1000个用户,岂不是又1000个页面,但是显示的内容其实差别都是不大的,那么我们怎么实现复用了,这个时候,我们就可以用到Vue-Router中的动态路由

Vue-Router中的动态路由

index.js中
1
2
3
4
5
    {
      path: '/user/:userid?',    //   /user/1   问号的作用就是可有可无,表示这个参数可以没有,也可以有,都是成立的
      name: 'User',
      component: User
    },
user.vue组件中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<template>
  <div class="hello">
    <h1>user</h1>
    <router-link :to="'/user/'+item.id" key="index" v-for="item,index in datalist"><span style="padding:20px;">{{item.name}}</span></router-link>

  </div>

</template>
<script type="text/javascript">
let data=[
            {
                id:1,
                name:'张三',
                number:100
            },
            {
                id:2,
                name:'张4',
                number:10
            },
            {
                id:3,
                name:'张5',
                number:23
            }
];
 export default({
 data(){
    return {
        datalist:data
    }
 }

 })

</script>
1
 
1
 
1
 

作者: huanggr

为您推荐

7

发表评论

电子邮件地址不会被公开。 必填项已用*标注