精华内容
下载资源
问答
  • Vue动态路由传值和Get传值
    2019-03-02 09:03:35

    Vue动态路由:在一个页面获取上一个页面的传值

    1:配置动态路由步骤:

    const routes = [

    //(main.js文件中)

                  { path: '/Content/:aid', component: Content }//动态路径参数以冒号开头

                ]

    在上一个页面中配置<router-link :to="'/Content/'+key">{{key}}---{{item}}</router-link>

    2:在对应的页面

    this.$route.params获取动态路由的值

    代码示例:

    //main.js
    import Vue from 'vue'
    import App from './App.vue'
    import VueResource from 'vue-resource'
    import VueRouter from 'vue-router'
    import Home from './components/Home'
    import News from './components/News'
    import Content from './components/Content'
    import Product from './components/Product'
    
    /*定义路由 */
    const routes = [
                    { path: '/', component: Home },
                    { path: '/Home', component: Home },
                    { path: '/News', component: News },
                    { path: '/Product', component: Product },//get传值
                    { path: '/Content/:aid', component: Content }//动态路由
                   
                  ]
      // 实例化路由
      const router = new VueRouter({
        routes // (缩写)相当于 routes: routes
      })
    Vue.use(VueRouter)
    Vue.use(VueResource)
    
    new Vue({
      el: '#app',
      // 将路由实例挂载到vue实例上
      router,
      render: h => h(App)
    })

    传值页面:

    <template>
        <div>
            <h1>这是新闻组件</h1>
           <ul>
               <li v-for="(item,key) in list" :key="key">
                        //:to="''+key"标识动态绑定key的值
                   <router-link :to="'/Content/'+key">{{key}}---{{item}}</router-link>
               </li>
           </ul>
        </div>
    </template>
    <script>
    
    export default {
        data(){
           return{
                aaa:'m,sh',
                list:['你好','这是新文艺','这是新思想']
           }
        }
      
    }
    </script>
    
    <style lang="scss" scoped>
    h1{
        color: skyblue;
    }
    </style>

    获取值的页面:

    <template>
        <div id="content">
            <h1>我是详情页面</h1>
    
        </div>
    </template>
    <script>
    export default {
        data(){
            return{
                
            }
        },
        mounted(){
            console.log(this.$route.params)/* 获取动态路由传值 */
        }
    }
    </script>
    <style lang="scss" scoped>
    
    </style>

    Get传值:

    //传值页面
    <template>
        <div>
            <br>
            <h2>这是一个首页组件</h2>
            <hr>
            <ul>
                <li v-for="(item,key) in list" :key="key">
                    <router-link :to="'/Product/?id='+key">{{key}}---{{item}}</router-link>
    
                </li>
            </ul>
    
    
        </div>
    </template>
    <script>
    import Bus from '../model/bus'
    export default {
        data(){
            return{
                msg:'Yes, a first Page!',
                title:'我是的数据NO.1',
                list:['商品已','商品丁','商品家']
            }
        }
    }
    </script>
    <style lang="scss" scoped>
    h2{
        color: red;
    }
    </style>

    获取值的页面:

    <template>
        <div id="product">
            <h1>商品详情</h1>
            
        </div>
    </template>
    <script>
    export default {
        data(){
            return{
    
            }
        },
        mounted(){
            /* this.$route.query用于获取get传值 */
            console.log(this.$route.query)
        }
    }
    </script>

    main.js页面:

    /*定义路由 */
    const routes = [
                    { path: '/', component: Home },
                    { path: '/Home', component: Home },
                    { path: '/News', component: News },
                    { path: '/Product', component: Product },//get传值
                    { path: '/Content/:aid', component: Content }//动态路由
                   
                  ]

     

    更多相关内容
  • 使用vue动态路由(“/route/:id” 形式) 传参的时候,修改页面参数,但是视图仍旧是之前的内容,没有进行刷新,示例如下: 原因分析: 具体原因在vue官方文档:响应路由参数的变化一节中有讲过: 当使用路由参数时...
  • vue3 路由传值

    2021-07-01 16:52:50
    通过从路由中导入 useRoute useRouter 使用 route 和 router 传递参数 import {defineComponent } from "vue"; import { useRouter } from 'vue-router' export default defineComponent({ setup() { const $...

    通过从路由中导入 useRoute useRouter 使用 route 和 router

    传递参数

    import {defineComponent } from "vue";
    import { useRouter } from 'vue-router'
    export default defineComponent({
        setup() {
            const $router = useRouter()
               // 命名路由
                let toAbout=()=>{
                $router.push({name:'About',params:{id:1}})    //传递参数
                }
           
               //query传值
                let toNews=()=>{
                $router.push({path:'/news',query:{id:2}})    //传递参数
                }
    
               return {
                   toAbout,
                   toNews
               };
        }
    })
    
    

    接收参数

    import {defineComponent } from "vue";
    import { useRoute } from 'vue-router'
    export default defineComponent({
        setup() {
          const $route = useRoute()
          onMounted(()=>{
            console.log($route.params.id)        //   打印 params 的参数
            
            console.log($route.query.id)         //   打印 query 的参数
          })
        },
    })
    
    展开全文
  • 路由跳转传值一种为路由动态配置值,一种为路由的get传值,先来介绍路由动态传值。 一.路由动态传值 路径要求严格,在配置路由的时候设置动态传值 1.基本配置 index.js 配置路由的节点 // 配置的路由节点 ...

    路由跳转传值一种为路由的动态传值,一种为路由的get传值,先来介绍路由的动态传值

    一.路由的动态传值

    路径要求严格,在配置路由的时候设置动态传值

    1.基本配置

    index.js 配置路由的节点

    // 配置的路由节点
    import Home from '../views/Home.vue'
    import about from '../views/About'
    //在配置路由的时候设置动态传值 类似/:id
    export default[
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/about',
        name: 'About',
        component:about,
      }
    ]
    

    router.js 配置整个的路由

    //配置整个路由
    import { createRouter, createWebHistory } from 'vue-router'
    import routes from '../router/index'
    const router = createRouter({
        history: createWebHistory(),
        routes
      })
    export default router
      
    

    main.js

    import { createApp } from 'vue'
    import App from './App.vue'
    //引入路由文件
    import router from './router/router'
    const app=createApp(App);
    app.use(router);
    app.mount('#app');
    
    

    主页面:App.vue

    <template>
      <div id="app">
        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link>
        <router-view></router-view>
      </div>    
    </template>
    <script>
    export default {
       name:'app',
        
      }
    </script>
    

    两个子组件:
    Home.vue

    <template>
      <div class="home">
        home组件
      </div>
    </template>
    <script>
    export default {
      name: 'Home',
    }
    </script>
    

    About.vue

    <template>
      <div id="about">
        about组件
      </div>
    </template>
    <script>
    export default {
      name:'about',
    }
    </script>
    

    界面结果显示:
    在这里插入图片描述

    2.在配置的路由节点动态传值

    在配置的路由里进行传值
    index.js

    // 配置的路由节点
    import Home from '../views/Home.vue'
    import about from '../views/About'
    //在配置路由的时候设置动态传值 类似/:id
    export default[
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/about/:id',
        name: 'About',
        component:about,
      }
    ]
    

    主页面:App.vue

    <template>
      <div id="app">
        <router-link to="/">Home</router-link> |
        //如果配置动态传值 点击跳转的时候也要进行传值
        <router-link to="/about/1000">About</router-link>//此为静态的传的值1000
        <router-view></router-view>
      </div>    
    </template>
    <script>
    export default {
       name:'app',
        
      }
    </script>
    

    界面结果显示:
    在这里插入图片描述

    • 如何获取路由的值在About.vue里

    About.vue

    <template>
      <div id="about">
        about组件
      </div>
    </template>
    <script>
    export default {
      name:'about',
      mounted(){
      //挂载完成获取路由的动态传值
      //this.$route 此api是当前路由的相关匹配参数
        console.log(this.$route.params.id);
    }
    </script>
    

    结果显示:
    在这里插入图片描述

    • 如果想要在App.vue绑定动态传值

    App.vue

    <template>
      <div id="app">
        <router-link to="/">Home</router-link> |
        //动态绑定 使用es6 字符串模板
        <router-link :to="`/about/${id}`">About</router-link>
        <router-view></router-view>
      </div>    
    </template>
    <script>
    export default {
       name:'app',
       data(){
        return{
          id:123456
        }
      }
      }
    </script>
    
    
    

    界面结果显示:
    在这里插入图片描述

    • 如果路由上传多个值

    index.js

    // 配置的路由节点
    import Home from '../views/Home.vue'
    import about from '../views/About'
    export default[
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
      //在后面继续添加
        path: '/about/:id/:name',
        name: 'About',
        component:about,
      }
    ]
    

    App.vue也要做出相应的变化

    <template>
      <div id="app">
        <router-link to="/">Home</router-link> |
        <router-link :to="`/about/${id}/${name}`">About</router-link>
        <router-view></router-view>
      </div>    
    </template>
    <script>
    export default {
       name:'app',
      data(){
        return{
          id:123456,
          name:'jiang',
        }
      }
      }
    </script>
    
    
    

    界面结果显示:
    在这里插入图片描述
    vue 路由get传值链接:
    https://blog.csdn.net/weixin_47863547/article/details/119189387

    展开全文
  • 1.动态路由传值 在我这个项目里要实现的是从 News.vue 跳转到Content.vue News.vue &lt;template&gt; &lt;!-- 所有的内容要被根节点包含起来--&gt; &lt;div id="news"&gt; 我...

    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>
                <!--<router-link to="/content/aid=123">{{key}}---{{item}}</router-link> 将aid写死 -->
            </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>
    

    最后在控制台中你可以看到:
    在这里插入图片描述
    点了 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行)

    // 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>
    

    最后的效果是这样的:
    在这里插入图片描述
    为方便大家查看,我放上根组件和我的目录结构
    这是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>
    

    目录结构
    在这里插入图片描述
    若有任何疑问或是不解请在下方评论,谢谢。

    展开全文
  • 内容:动态路由传值和get传值 一、动态路由传值 (1)新建并引入组件:新建需要动态路由传值得组件,并再main.js中引入 import News from './components/News.vue' import content from './components/content.vue' ...
  • vue路由传值

    2021-11-18 17:28:23
    基本路由传参 传递参数: 方式一: this.$router.push('/path地址?参数一=参数值1&参数二=参数值2') 方式二: this.$router.push({path:'',query:{参数一:参数值1,参数二:参数值2}}) 接收参数: this.$route....
  • Vue 动态路由传值

    2018-06-19 17:29:00
    动态路由传值 1.配置动态路由; const routes = [ //动态路由路径参数以:开头 { path: '/Content/:aid', component:Content}, ] 2. <router-link :to="'/Shopcontent/'+key"> {{key}}--{{item}} ...
  • VUE 3.0 路由传值

    2022-05-05 17:29:36
    1、Vue项目创建
  • vue路由组件传值

    2021-05-31 11:11:00
    文章目录前言一、组件一(传值)1.element-ui界面2.JS部分一、组件二(接收值)1.element-ui界面2.JS部分 前言 例如:el-table表格中的某一列数据(标题)是被包裹在router-link中的,点击某一个标题,跳转到对应标题的...
  • 在前端的路由里面,我们在切换路由的时候,也相当于切换了页面,页面与页面之前有时候需要做到传值 ,这个时候就需要进行路由传值,在VueRouter里面,两个路由之间做跳转的时候,如何进行传值呢? 普通跨页面传值: ...
  • 上一篇我们讲解了vue中的路由以及默认路由跳转,本篇我们来继续学习如何通过类似Get请求传值的方式,给路由传递参数。 本系列博文使用的Vue版本:2.6.11 一、动态传参的概念 上一篇我们实现了分别点击“首页”和...
  • Document a登录 a注册 router-link登录 router-link注册 router-link登录:id 子路由实现 登录 注册
  • Vue-Router 传参可以分为两大类 分别是编程式的导航 router.push 和声明式的导航<router-link> 一、编程式的导航 router.push 编程式导航传递参数有两种类型:字符串、对象。 字符串 : 字符串的方式是...
  • Vue路由跳转传值方法

    2020-08-14 14:42:26
    传值: <router-link :to="{name:'跳转的路由名称',params:{数值名1:'值内容1',数值名1:'值内容1'}}" 取值: $route.params.数值名1 路由: { path: '/', name: '跳转的路由名称', component: () => import...
  • 1.动态路由传值  1.配置路由处  { path: '/content/:id', component: Content }, // 动态路由    2.对应页面传值  <router-link :to="/content/+item">{{item}}</router-link>  3.对应...
  • vue 路由传值与跳转

    千次阅读 2019-06-06 14:25:18
    特别注意:命名路由这种方式传递的参数,如果在目标页面刷新是会出错的 使用方法如下: this.$router.push({ name: 'news', params: { userId: 123 }}) 接收值:this.$route.params.userId 查询参数其实就是...
  • 动态路由传值3. 路由query对象传值4. 命名路由传值总结路由有以下两种跳转方式:路由跳转时共有以下四种传值方式: 前言 一、vue路由配置步骤 1.第一步: 导入vue.js和vue-router.js插件 <script src='vue.js'>...
  • vue 路由组件传值

    2019-03-18 14:59:08
    地址:... 1、不同路由传值动态路由传值 A.配置动态路由 routes: [ { path: '/user/:id', component: User } ] B.在对应的页面通过以下方式获取值 console.log(this.$route.pa...
  • vue3路由跳转传值,接收值

    千次阅读 2022-03-16 14:37:48
    路由传值及接收值
  • 传值的页面进行router-link的包裹(需要穿哪一块就包裹那一块),<router-link :to="{name:“”,query:{sid:sid}}"(键值对,name和query是固定的,name后面是去的路由地址。query是传的参数) tag="a"(这...
  • vue2.x 常见路由传值

    2022-02-14 10:43:22
    vue常见的两钟路由传值方式... router.js import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', name: 'index', component: Index, redirect: '/...
  • 有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转...const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', component: User } ] })
  • 动态路由传值

    2021-07-08 16:13:26
    //User.vue <h1>{{userId}}</h1> <script> export default { computed:{ userId(){ return this.$route.param.abc//$route获取到正在活跃的路由 } } } </script> ...
  • vue路由传值

    2021-07-11 18:01:25
    vue中this.$router.push()路由传值和获取的两种常见方法 1、路由传值 this.$router.push() (1) 想要导航到不同的URL,使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退...
  • 对应的路由配置模块 1、使用router.push拼接参数传参this.router.push 拼接参数传参 this.router.push拼接参数传参this.router.push(’/editCardetail?editType=add’) 2 当点击 时,这个方法会在内部调用,即点击...
  • 方式一:动态路由传值 1、定义路由规则 import Newcontent from './components/NewContent.vue'; //2、配置路由 const routes = [ { path: '/new', component: News }, { path: '/blog', component: Blog ...
  • 本文记录Vue.js如何使用路由功能(包括设置默认路由路由跳转)以及使用动态路由(url传值)和get传值Vue.js下使用路由功能 要使用路由功能必须先在项目中安装官方提供的vue-router库,cmd进入项目文件夹,...
  • vue路由传值

    2020-06-11 12:31:29
    vue路由传值(A跳转到B,B接收A的参数) 1.A页面 2. 路由配置(component为B页面路径) 3. B页面取值
  • vue路由传值及接收传递数据

    千次阅读 2018-07-16 10:24:29
    传递数据 <template> <div id="app"> <router-link :to="{path: '/page', query:{page}}...router-link传值</router-link> <div @click='goPage()'>方法传值</div> </div...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,987
精华内容 3,994
关键字:

vue动态路由传值