Vue路由传值的两种方法：动态路由与get传值

迈不过友情╰ 2022-03-17 11:48 446阅读 0赞

#### 1.动态路由传值 ####

在我这个项目里要实现的是从 News.vue 跳转到Content.vue

**News.vue**

<template>
     
     <div id="news">
         我是一个新闻组件
         <br>
         
        <ul>
            <li v-for="(item,key) in list">
                <router-link :to="'/content/'+key">{ { key}}---{ { item}}</router-link>
                
            </li>
        </ul>
     </div>
    </template>
    
    <script>
    
    export default { 
     data(){ 
         return { 
             msg:'我是一个news组件',
             list:['111','222','333']
         }
     }
     
    }
    </script>

**Content.vue** （主要是第16行和第17行）

<template>
        <div id="content">
            我是详情页面
        </div>
    </template>
    
    <script>
    
    
    export default { 
        data(){ 
            return{ 
                msg:"数据"
            }
        },
        mounted(){ 
            console.log(this.$route.params);//获取动态路由传值
        }
    }
    </script>

在**main.js** 中配置路由（第16行与第23行）

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    
    //导入并使用
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    
    Vue.config.productionTip = false
    
    //1.创建组件
    import Home from './components/Home.vue';
    import News from './components/News.vue';
    import Content from './components/Content.vue';
    import Pcontent from './components/Pcontent.vue';
    
    //2.配置路由 注意，名字一定不能错
    const routes = [    //若这里是 xxx，那么第25行应是 routers:xxx
      {  path: '/home', component: Home },
      {  path: '/news', component: News },
      {  path: '/content/:aid', component: Content },/* 动态路由*/
      {  path: '/pcontent', component: Pcontent },
      {  path: '*', redirect: '/home' }//默认跳转路由
    ]
    
    //3.实例化VueRouter 注意，名字一定不能错
    const router = new VueRouter({ 
      routes // （缩写）相当于 routes: routes
    })
    
    //4.挂载路由
    
    /* eslint-disable no-new */
    new Vue({ 
      el: '#app',
      router,
      components: {  App },
      template: '<App/>'
    })
    
    //5.根组件的模板里放上这句话 <router-view></router-view>

最后在控制台中你可以看到：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]  
点了 key=2 的内容，获取了aid。

#### 2.get传值 ####

在这里我要实现的是从 Home.vue 跳转到 Pcontent.vue

**Home.vue**(主要为第8行)

<template>
        
        <div id="home">
            我是首页组件
            <br>
            <ul>
            <li v-for="(item,key) in list">
                <router-link :to="'/pcontent?aid='+key">{ { key}}---{ { item}}</router-link>
            </li>
        </ul>
            
        </div>
    </template>  
    
    <script>
    
    export default { 
        data(){ 
            return { 
                msg:'我是一个home组件',
                list:['商品111','商品222','商品333']
            }
        }
        
    }
    </script>

**Pcontent.vue**(主要是第18行)

<template>
        <div id="pcontent">
            商品详情
        </div>
    </template>
    
    <script>
    
    
    export default { 
        data(){ 
            return{ 
                msg:"数据",
            }
        },
        mounted(){ 
            //get传值
            console.log(this.$route.query);
        }
    }
    </script>

在**main.js** 中配置路由（第17行与第24行）

最后的效果是这样的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 1]  
为方便大家查看，我放上根组件和我的目录结构  
这是**App.vue** 根组件

<template>
      <div id="app">
        
        <router-link to="/home">Go to Home</router-link>
        <router-link to="/news">Go to News</router-link>
        
        <hr>
        <router-view></router-view>
    
      </div>
    </template>
    
    <script>
    /** 1不同路由传值，动态路由 * * * (1).配置动态路由 * routes:[ * // 动态路径参数 以冒号开头 * {path: '/user/:id',component:User} * ] * * (2).在对应的页面 * this.$route.params 获取动态路由的值 * * * 2.get传值 * * * (1).配置动态路由 * routes:[ * // 动态路径参数 以冒号开头 * {path: '/user',component:User} * ] * * (2).在对应的页面 * this.$route.query 获取动态路由的值 * */
    export default { 
      name: 'App',
      data(){ 
        return{ 
          msg:'你好vue'
        }
      }
      
    }
    </script>
    
    <style>
    
    </style>

**目录结构**  
![在这里插入图片描述][20190224101804487.png]  
若有任何疑问或是不解请在下方评论，谢谢。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]: /images/20220317/8f371bc4e56d4bc3b8dbed91114d1697.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 1]: /images/20220317/cb08fc821f4940a98feb704dcb606591.png
[20190224101804487.png]: /images/20220317/57bb92afe92d490985cc976b78a892e1.png