路由嵌套和参数传递

Posted 2020-11-07 Carina

 1 <div id="itany">
 2     <div>
 3         <router-link to="/home">主页</router-link>
 4         <router-link to="/user">用户</router-link>
 5     </div>
 6     <div>
 7         <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
 8             <router-view></router-view>
 9         </transition>
10     </div>
11 
12     <hr>
13     <button @click="push">添加路由</button>
14     <button @click="replace">替换路由</button>
15 </div>
16 
17 <template id="user">
18     <div>
19         <h3>用户信息</h3>
20         <ul>
21             <router-link to="/user/login?name=tom&pwd=123" tag="li">用户登陆</router-link>
22             <router-link to="/user/regist/alice/456" tag="li">用户注册</router-link>
23         </ul>
24         <router-view></router-view>
25     </div>
26 </template>
27 
28 <script>
29     var Home={
30         template:‘<h3>我是主页</h3>‘
31     }
32     var User={
33         template:‘#user‘
34     }
35     var Login={
36         template:‘<h4>用户登陆。。。获取参数：{{$route.query}},{{$route.path}}</h4>‘
37     }
38     var Regist={
39         template:‘<h4>用户注册。。。获取参数：{{$route.params}},{{$route.path}}</h4>‘
40     }
41 
42     const routes=[
43         {
44             path:‘/home‘,
45             component:Home
46         },
47         {
48             path:‘/user‘,
49             component:User,
50             children:[
51                 {
52                     path:‘login‘,
53                     component:Login
54                 },
55                 {
56                     path:‘regist/:username/:password‘,
57                     component:Regist
58                 }
59             ]
60         },
61         {
62             path:‘*‘,
63             redirect:‘/home‘
64         }
65     ]
66 
67     const router=new VueRouter({
68         routes, //简写，相当于routes:routes
69         linkActiveClass:‘active‘ //更新活动链接的class类名
70     });
71 
72     new Vue({
73         el:‘#itany‘,
74         router, //注入路由
75         methods:{
76             push(){
77                 router.push({path:‘home‘}); //添加路由，切换路由
78             },
79             replace(){
80                 router.replace({path:‘user‘}); //替换路由，没有历史记录
81             }
82         }
83     });
84 </script>
85 </body>