vue 动态路由 Get传值

Posted 2021-01-22 spinoza

main.js

 1 //2.配置路由   注意：名字
 2 
 3 const routes = [
 4   { path: ‘/home‘, component: Home },
 5   { path: ‘/news‘, component: News },
 6 
 7   { path: ‘/content/:aid‘, component: Content },   /*动态路由*/
 8 
 9   { path: ‘/pcontent‘, component: Pcontent },
10 
11 
12   { path: ‘*‘, redirect: ‘/home‘ }   /*默认跳转路由*/
13 ]

通过get传值获取路由参数

 1 <template>
 2    
 3     <div id="content">    
 4       商品详情
 5     </div>
 6 </template>
 7 
 8 
 9 <script>
10     
11 
12 
13     export default{
14 
15         data(){
16 
17             return{
18 
19                 msg:‘数据‘
20             }
21         },
22         mounted(){
23 
24               //获取get传值
25 
26 
27               console.log(this.$route.query);
28         }
29 
30     }
31 </script>

动态路由获取参数

 1 <template>
 2    
 3     <div id="content">    
 4        我是详情页面
 5     </div>
 6 </template>
 7 
 8 
 9 <script>
10     
11 
12 
13     export default{
14 
15         data(){
16 
17             return{
18 
19                 msg:‘数据‘
20             }
21         },
22         mounted(){
23 
24                 console.log(this.$route.params);  /*获取动态路由传值*/
25 
26         }
27 
28     }
29 </script>