Vue-Router路由 Vue-CLI腳手架和模塊化開發之使用路由對象獲取參數

時間 2019-11-17

標籤 vue router 路由 cli 腳手架模塊化開發使用對象獲取參數欄目系統網絡简体版

原文原文鏈接

使用路由對象$route獲取參數：javascript

一、params：html

參數獲取：使用$route.params獲取參數；vue

參數傳遞： URL傳參：例 <route-linke to : "/foods/bjc/北京烤鴨/68"> 注：在對應路由path上使用 /:+屬性名稱接收參數java

實例：vue-router

須要在子組件的路由中定義所需的屬性名;ide

代碼：url

<template id="foods">
        
        
        <div>
            
            <h2>美食廣場</h2>
            <ul>
                <router-link to="/foods/bjc/北京烤鴨/68" tag="li"> 北京菜</router-link>
                <router-link to="/foods/hnc" tag="li"> 湖南菜</router-link>
                <router-link to="/foods/xc" tag="li"> 湘菜</router-link>
                <router-link to="/foods/yc" tag="li"> 粵菜</router-link>
                <router-link to="/foods/scc" tag="li"> 四川菜</router-link>
            </ul>
            
            <router-view></router-view>
        </div>
    </template>

//定義foods中的子組件
        
        let Bjc={
            template : "<h3>北京菜 菜名：{{$route.params.name}} 價格：{{$route.params.price}}</h3>"
            
        }

//2 配置路由 路由可能有多個
        const myRoutes = [
            {
                path : "/home",
                component : Home
            },
            {
                path : "/foods",
                component : Foods,
                
                children:[
                {
                    path:"bjc/:name/:price",//定義其屬性
                    component:Bjc
                
                
                },

對象傳參：例 <route-linke :to : "xxObj"> 注：對象格式{String name, Objce param} name是路由名稱，param是傳遞參數的對象spa

對象須要經過v-bind進行綁定code

<router-link :to="sccParam" tag="li"> 四川菜</router-link>

使用對象：component

let Foods = {
            template : "#foods",
            data(){
                
                return{
                    sccParam:{
                        
                        name:'sccRouter',
                        
                        params:{
                            
                            name:"麻婆豆腐",
                            price:28
                        }
                    }
                }
            }
        }

let Scc={
            template : "<h3>四川菜  菜名：{{$route.params.name}} 價格：{{$route.params.price}}</h3>"
            
            
            
        }

效果：

注意：對象的名稱必須和路由的名稱保持一致，在路由中起的名稱能夠稱做爲命名路由

二、query：

參數獲取：使用$route.query獲取參數；

參數傳遞： URL傳參：例 <route-linke to : "/foods/bjc?name=北京烤鴨&price=68">

代碼：

    <router-link to="/foods/xc?name=剁椒魚頭&price=128" tag="li"> 湘菜</router-link>

let Xc={
            template : "<h3 >湘菜  菜名：{{$route.query.name}} 價格：{{$route.query.price}}</h3>"
            
        }

對象傳參：例 <route-linke :to : "xxObj"> 注：對象格式{String path, Objce query} path是路由url，query是傳遞參數的對象

<router-link :to="ycParam" tag="li"> 粵菜</router-link>

let Foods = {
            template : "#foods",
            data(){
                
                return{
                    sccParam:{
                        
                        name:'sccRouter',
                        
                        params:{
                            
                            name:"麻婆豆腐",
                            price:28
                        }
                    },
                    
                    ycParam:{
                        path:'/foods/yc',
                        query:{
                            name:"蜜汁叉燒",
                            price:56
                            
                        }
                        
                    }
                }
            }
        }

let Yc={
            template : "<h3>粵菜  菜名：{{$route.query.name}} 價格：{{$route.query.price}}</h3>"
            
        }

以上實例的全部代碼：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>使用路由對象獲取參數</title>
  6 </head>
  7     <body>
  8         <div id="one">
  9             <router-link to="/home">首頁</router-link>
 10             <router-link to="/foods">美食</router-link>
 11             
 12             <div>
 13                 <!--將數據顯示在這裏-->
 14                 <router-view></router-view>
 15             </div>
 16         </div>
 17     </body>
 18     <template id="foods">
 19         
 20         
 21         <div>
 22             
 23             <h2>美食廣場</h2>
 24             <ul>
 25                 <router-link to="/foods/bjc/北京烤鴨/68" tag="li"> 北京菜</router-link>
 26                 <router-link to="/foods/hnc" tag="li"> 湖南菜</router-link>
 27                 <router-link to="/foods/xc?name=剁椒魚頭&price=128" tag="li"> 湘菜</router-link>
 28                 <router-link :to="ycParam" tag="li"> 粵菜</router-link>
 29                 <router-link :to="sccParam" tag="li"> 四川菜</router-link>
 30             </ul>
 31             
 32             <router-view></router-view>
 33         </div>
 34     </template>
 35     
 36     <script type="text/javascript" src="../js/vue.js" ></script>
 37     <script type="text/javascript" src="../js/vue-router.js" ></script>
 38     <script>
 39         
 40         //1 定義組件
 41         let Home = {
 42             template : "<h2>首頁</h2>"
 43         }
 44         let Foods = {
 45             template : "#foods",
 46             data(){
 47                 
 48                 return{
 49                     sccParam:{
 50                         
 51                         name:'sccRouter',
 52                         
 53                         params:{
 54                             
 55                             name:"麻婆豆腐",
 56                             price:28
 57                         }
 58                     },
 59                     
 60                     ycParam:{
 61                         path:'/foods/yc',
 62                         query:{
 63                             name:"蜜汁叉燒",
 64                             price:56
 65                             
 66                         }
 67                         
 68                     }
 69                 }
 70             }
 71         }
 72         
 73         //定義foods中的子組件
 74         
 75         let Bjc={
 76             template : "<h3>北京菜 菜名：{{$route.params.name}} 價格：{{$route.params.price}}</h3>"
 77             
 78         }
 79         
 80         let Hnc={
 81             template : "<h3>湖南菜  </h3>"
 82             
 83         }
 84         let Xc={
 85             template : "<h3 >湘菜  菜名：{{$route.query.name}} 價格：{{$route.query.price}}</h3>"
 86             
 87         }
 88         
 89         let Yc={
 90             template : "<h3>粵菜  菜名：{{$route.query.name}} 價格：{{$route.query.price}}</h3>"
 91             
 92         }
 93         
 94         let Scc={
 95             template : "<h3>四川菜  菜名：{{$route.params.name}} 價格：{{$route.params.price}}</h3>"
 96             
 97             
 98             
 99         }
100         
101         //2 配置路由 路由可能有多個
102         const myRoutes = [
103             {
104                 path : "/home",
105                 component : Home
106             },
107             {
108                 path : "/foods",
109                 component : Foods,
110                 
111                 children:[
112                 {
113                     path:"bjc/:name/:price",//定義其屬性
114                     component:Bjc
115                 
116                 
117                 },
118                 {
119                     path:"hnc",
120                     component:Hnc
121                 
122                 
123                 },
124                 
125                 {
126                     path:"xc",
127                     component:Xc
128                 
129                 
130                 },
131                 {
132                     path:"yc",
133                     component:Yc
134                 
135                 
136                 },
137                 {
138                     name:'sccRouter',
139                     path:"scc",
140                     component:Scc
141                 
142                 
143                 }
144                 
145                 
146                 
147                 
148                 
149                 ]
150             },
151         {
152             path:"*",
153                 redirect:"/home"
154             }
155         ]
156         
157         // 3 建立路由對象
158         const myRouter = new VueRouter({
159             //routes : routes
160             routes : myRoutes,
161             //mode:'history'
162              linkActiveClass : "active"
163 
164         });
165         
166         new Vue({
167             //router : router
168             router : myRouter //4 注入路由 簡寫
169         }).$mount("#one");
170     </script>
171     <style>
172         
173         
174         .active{
175             color: white;
176             
177             background-color: black;
178         }
179     </style>
180 </html>