精华内容
下载资源
问答
  • 主要介绍了详解Angular5 路由传参的3种方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决;Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ ...
  • 主要为大家详细介绍了vue路由传参的3种基本模式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本文实例讲述了vue路由传参的基本实现方式。分享给大家供大家参考,具体如下: 前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转。传参方式可划分为 params 传参和 query 传参,而 ...
  • 这篇文章主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数...
  • 传参传了个【object】 下面代码可以借鉴 // 传送 vue3 写法 function myContent(i) { // 跳转路由传递对象参数 router.push(`/myContent?searchInfo=${JSON.stringify(i)}`); } // 接收 setup(props, { ...

     传参传了个【object】 下面代码可以借鉴

     // 传送 vue3 写法
    function myContent(i) {
          // 跳转路由传递对象参数
          router.push(`/myContent?searchInfo=${JSON.stringify(i)}`);
        }
     // 接收
    setup(props, { emit }) {
        let route = useRoute();
        let params = JSON.parse(route.query.searchInfo);
        console.log(params); // 传过来的参数
        return {};
      },

     

    或者用query一条一条的传 ,一条一条的接收。

    展开全文
  • vue传参大致分为路由传参(?拼接传参)和动态路由传参 一、动态路由传参 定义路由 const routes = [ { path: '/first', name:'first', component:()=>import( '../components/first.vue' ) // ...

    vue传参大致分为路由传参(?拼接传参)和动态路由传参

    一、动态路由传参

    定义路由

    const routes = [
      {
        path: '/first',
        name:'first',
        component:()=>import( '../components/first.vue' )
        // component:first
      },
      {
          path: '/second',
          name:'second',
        component:()=>import( '../components/second.vue' )
      },
    ]

    router-link to 以对象形式跳转

    <template>
      <div id="app">
        <router-link :to="{name:'first',params:{name:'张三'}}">params</router-link>
    
        <router-link :to="{name:'second',query:{name:'李四'}}">query</router-link>
        <router-view></router-view>
      </div>
    </template>

    (1)params传参

     <h1>params对象传参{{$route.params.name}}</h1>

     

     

     

    (2)query传参

    发现query传参并没有会丢失  注意看地址栏 在一开始跳转的时候 发现就在url地址栏上以?拼接了参数路径,而params跳转时没有,所以说这也是params动态路由传参和query动态路由传参的区别,也是params对象传参为什么会消失的问题。

    解决params动态传参刷新后参数丢失问题

    因为params动态路由传参时,url地址并没有拼接,但是query会拼接在地址栏上,所以vue提供给我们另一种动态传参的方式,我们只需要在定义路由时在后面拼接/:name,就可以解决刷新后参数会丢失的问题,注意这里不是以?拼接了路径  

      {
        path: '/first/:name',
        name:'first',
        component:()=>import( '../components/first.vue' )
      },

     跳转

    <router-link to="/first/张三">params</router-link>

    当然 还有一种push写法 也是一样的道理 项目中也是用的比较多的

    对象跳转

        <a @click="$router.push({name:'first',params:{name:'张三'}})">a链接</a>

    $router.push 

      <a @click="$router.push('/first/张三')">a链接</a>

    二、路由传参  ?拼接

    只需要在路由的后面利用?的形式 进行参数的拼接

      <router-link to="/second?name=张三">?传参</router-link>
        <a @click="$router.push('/second?name=张三')">a链接</a>

    三、后退

            <a @click="$router.back()">回退</a>
            <a @click="$router.go(-1)">回退</a>

    go的功能还是比较强大的 正数可以前进  负数可以后退  里面的数字可以决定前进后退的层次

    展开全文
  • 一直理不清楚路由传参的几种方式,今天总结记录下 第一种方法通过params与配置路由格式(特点:刷新数据不会丢失,会以/user/1234格式拼接显示在url里面) 路由配置 { path: '/user/:id', name: 'user', ...

    一直理不清楚路由传参的几种方式,今天总结记录下

    第一种方法通过params与配置路由格式(特点:刷新数据不会丢失,会以/user/1234格式拼接显示在url里面)

    路由配置

    {
         path: '/user/:id',
         name: 'user',
         component: user
       }
    

    带参数传递

     //直接调用$router.push 实现携带参数的跳转
            this.$router.push({
              path: '/user/123',
            })
    

    获取对应参数

    this.$route.params.id
    
    第二种方法通过路由属性中的name来确定匹配的路由,通过params来传递参数(特点:刷新会丢失参数,但不会显示在url里面)

    路由配置

    {
         path: '/user',
         name: 'user',
         component: user
       }
    

    带参数传递

    this.$router.push({
          name: 'user',
          params: {
            id: id
          }
        })
    

    获取对应参数

    this.$route.params.id
    
    第三种方式使用path来匹配路由,然后通过query来传递参数(特点:刷新不会丢失数据,但是参数会以?id:123的格式拼接显示在url里面)

    路由配置

    {
         path: '/user',
         name: 'user',
         component: user
       }
    

    带参数传递

    this.$router.push({
          path: '/user',
          query: {
            id: id
          }
        })
    

    获取对应参数

    this.$route.query.id
    
    组件的主要功能就是可以复用,但是一旦使用了$route获取路由参数,该组件就会与路由参数具有高耦合性,不便于组件的复用。为了解耦,我们可以使用props来接受路由传参,也可以自定义的让父组件进行出传参。(经过测试这个方法只适合使用params能接收到的路由参数,也就是上文中的第一,二种方法)

    在组件定义props来接收参数或者用于父组件传参

    props: {
    	id: {
    		type: String,
    	        default: ''
        }
    }
    

    接收参数

    //可以使用以前的方法获取参数
    this.$route.params.id
    //但是更推荐直接使用props
    this.id
    
    展开全文
  • 二、vue-router的基本使用【单级路由】 1、index.js路由配置文件 在src文件夹下新建router文件夹,并创建inedx.js文件 注意:我这里导入的两个路由组件我将它们放置了pages文件夹下。作用:将路由组件与一般组件...

    一、vue-router插件的安装

    在工程目录下的终端执行以下命令

    	npm i vue-router
    

    二、vue-router的基本使用【单级路由】

    1、index.js路由配置文件

    在src文件夹下新建router文件夹,并创建inedx.js文件
    注意:我这里导入的两个路由组件我将它们放置了pages文件夹下。作用:将路由组件与一般组件区分

    // 用于创建整个应用的路由器
    import VueRouter from "vue-router";
    
    // 引入组件(一级路由)
    import About from '../pages/About.vue'
    import Home from '../pages/Home.vue'
    
    // 路由实例化
    const router = new VueRouter({
        routes: [{
                // 别名(一般对多级路由设置name属性,一级路由建议直接使用path)
                name: 'guanyu',
                // 路径
                path: '/about',
                // 对应的组件
                component: About,
            },
            {
                path: '/home',
                component: Home
            },
        ]
    });
    
    // 导出
    export default router;
    

    2、在main.js中使用vue-router插件

    import Vue from 'vue' // 精简版
    import App from './App.vue'
    
    // 1、引入vue路由插件
    import VueRouter from 'vue-router'
    // 2、引入路由配置文件(这里的path可以省略index。如:import router from './router')
    import router from './router/index'
    
    Vue.config.productionTip = false;
    
    // 3、使用路由
    Vue.use(VueRouter);
    
    new Vue({
        el: '#root',
        // 添加router属性
        router,
        render: cE => cE(App),
    });
    

    3、路由组件

    3.1、App组件

    <template>
        <div id="app">
            <h1>Vue Router Demo</h1>
            <hr>
            <div id="btn">
                <!-- 
                    路由字符串写法
                    to:表示path
                    tag:表示使用什么html标签
                    active-class:表示点击后使用什么样式
                 -->
                <router-link to="/about" active-class="active" tag="button">About</router-link><br>
                <router-link to="/home" active-class="active" tag="button">Home</router-link>
            </div>
            <!-- 
             	路由对象写法。使用v-bind绑定,让双引号中的内容为js表达式
             	 <router-link :to="{path:'/home'}"  active-class="active" tag="button">Home</router-link>
             -->
            <div id="result">
                <!-- 组件效果呈现的位置 -->
                <router-view></router-view>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            name: 'App',    
        }
    </script>
    <style>
        #app {
            width: 400px;
            height: 400px;
            margin: 50px auto;
        }
    
        #btn {
            float: left;
        }
    
        button {
            border-style: none;
            padding: 5px 10px;
            margin-top: 10px;
            margin-right: 10px;
        }
    
        #result {
            text-align: center;
            color: orange;
        }
    
        .active {
            background: rgb(0, 178, 248);
            border-color: white;
        }
        ul{
            list-style-type: style;
            list-style:inside;
        }
        li{
            width: 100px;
            height: 30px;
            margin-left: 20px;
            float: left;
        }
        a{
            padding: 5px;
            margin: 5px;
            color: black;
            text-decoration: none;
        }
        a:hover{
            background: rgb(214, 213, 213);
        }
    </style>
    

    3.2、About组件

    <template>
        <div>
            <h2>我是About组件的内容</h2>
        </div>
    </template>
    
    <script>
        export default {
            name: 'About',
        }
    </script>
    

    3.3、Home组件

    <template>
        <div>
            <h2>我是Home组件的内容</h2>
        </div>
    </template>
    
    <script>
        export default {
            name: 'Home',
        }
    </script>
    

    三、vue-router的进阶使用【多级路由】

    关于配置index.js和App组件的内容都与上面一致,【这里主要是更改了index.js路由配置文件和About组件】,把About组件中的内容看懂了可以尝试着写一下Home组件中的内容。

    1、index.js文件

    // 用于创建整个应用的路由器
    import VueRouter from "vue-router";
    
    // 引入组件(一级路由组件)
    import About from '../pages/About.vue'
    import Home from '../pages/Home.vue'
    
    // 二级路由组件
    import News from '../pages/News.vue'
    import Message from '../pages/Message.vue'
    
    // 三级路由组件
    import Detail from '../pages/Detail.vue'
    
    // 路由实例化
    const router = new VueRouter({
        routes: [{
                // 别名
                name: 'guanyu',
                // 路径
                path: '/about',
                // 对应的组件
                component: About,
                // News组件使用的是query属性路由传参
                // Message组件使用的是params属性路由传参
                children: [{   // 👈 二级路由开始
                		name:'xinwen',
                        path: 'news',
                        component: News,
                        children: [{  // 👈 三级路由开始
                            // 给detail一个别名。作用:在to时可以通过name找到path
                            path: 'detail',
                            component: Detail,
                        }]
                    },
                    {
                    	name: 'xiaoxi',
                        path: 'message',
                        component: Message,
                        children: [{
                            // 【传参时,使用params属性则必须使用name找path】!!!
                            name: 'xiangqing',
                            path: 'detail/:id/:content/:isShow',
                            component: Detail,
                        }]
                    }
                ],
            },
            {
                path: '/home',
                component: Home
            },
        ]
    });
    
    export default router;
    

    2、About组件

    <template>
        <div>
            <h2>About组件的内容</h2>
            <router-link 
                tag="button" 
                to="/about/news"  // 指向news的path,也可以使用对象写法指向name,即::to="{name:'xinwen'}"
                active-class="active">
                News
            </router-link>
            
            <router-link 
                tag="button"
                to="/about/message"  // 这里与上面也一样
                active-class="active">
                Message
            </router-link>
            
    		// 路由组件视图标签
            <router-view></router-view>
        </div>
    </template>
    
    <script>
        export default {
            name: 'About',
        }
    </script>
    

    3、About的子路由组件——News与Message

    3.1、News组件

    <template>
        <div>
            <ul>
                <li v-for="n in newsList" :key="n.id">
                    <a>{{n.news}}</a>
                </li>
            </ul>
          	<hr>
        </div>
    </template>
    
    <script>
        export default {
            name: 'News',
            data() {
                return {
                    newsList: [
                    	{id: '001', news: '新闻001'},
                        {id: '002', news: '新闻002'},
                        {id: '003', news: '新闻003'}
                	],
                }
            },
        }
    </script>
    

    3.2、Message组件

    <template>
        <div>
            <ul>
                <li v-for="m in msgList" :key="m.id">
                   {{m.message}}
                </li>
            </ul>
            <hr>
        </div>
    </template>
    
    <script>
        export default {
            name: 'Message',
            data() {
                return {
                    msgList: [
                    	{id: '001', message: '消息001'},
                        {id: '002', message: '消息002'},
                        {id: '003', message: '消息003'},
                    ]
                }
            },
        }
    </script>
    

    到这里,我们的二级路由效果是这样的:二级路由News效果图
    二级路由Message效果图

    四、vue-router的进阶使用【多级路由+传参】

    1、index.js文件

    index.js文件与上面的一样

    2、二级路由组件

    传参的方式有两种。
    在News中使用query属性,在Message中使用的params属性。
    query和params都可以通过this. r o u t e r . q u e r y 或 t h i s . router.query 或 this. router.querythis.router.params获取参数

    2.1、News组件【query传参】

    1、query之to属性字符串传参::to=" /about/news/detail?a=${100}&b=${200}“, 这里v-bind和模板字符串搭配使用,使变量能放入其中。
    2、query之to属性对象传参: :to=”{ path:’/about/news/detail’, query:{a=100, b=200} }"

    <template>
        <div>
            <ul>
                <li v-for="n in newsList" :key="n.id">
                    <!-- 1、跳转路由并携带query参数,to的字符串写法 -->
                    <!-- <router-link :to="`/about/news/detail?id=${n.id}&content=${n.news}`">{{n.news}}</router-link> -->
    
                    <!-- 2、跳转路由并携带query参数,to的对象写法 -->
                    <!--
    					这里的exact-active-class是query传参时使用,
    					它可以精确到被点击的link标签,如果使用active-class,
    					就会导致点击一个link会让其他的都会有效果。
    				-->
                    <router-link exact-active-class="active" :to="{
                            path:'/about/news/detail',
                            query:{
                                id:n.id,
                                content:n.news,
                                isShow:true  // 这里我设置了一个是否显示,因为有News和Message两个路由
                            }
                        }">
                        {{n.news}}
                    </router-link>
                </li>
            </ul>
            <hr>
            <router-view></router-view>
        </div>
    </template>
    
    <script>
        export default {
            name: 'News',
            data() {
                return {
                    newsList: [
                    	{id: '001', news: '新闻001'},
                    	{id: '002', news: '新闻002'},
                    	{id: '003', news: '新闻003'},
                    ],
                }
            },
        }
    </script>
    

    2.2、Message组件【params传参】

    params与query的区别在于:
    1、params之to属性字符串传参:需要在index.js文件中相对组件路径写对象占位符,例如:path: ‘detail/:id/:content/:isShow’。 在to属性中则: :to="/about/message/detail/${m.id}/${m.message}/${true}"
    2、params之to属性对象传参:与query对象传参基本一样,但在params中不能使用path来路由定位组件,【只能使用name来定位组件!!!】

    <template>
        <div>
            <ul>
                <li v-for="m in msgList" :key="m.id">
                    <!-- 跳转路由并携带params参数,to的字符串写法 -->
                    <!-- <router-link 
                        tag="a"
                        active-class="active"
                        :to="`/about/message/detail/${m.id}/${m.message}/${true}`">
                        {{m.message}}
                    </router-link> -->
    
                    <!-- 跳转路由并携带params参数,to的对象写法 -->
                    <router-link active-class="active" :to="{
                        name:'xiangqing',
                        params:{
                            id:m.id,
                            content:m.message,
                            isShow:true
                        }
                    }">
                    {{m.message}}
                    </router-link>
                </li>
            </ul>
            <hr>
            <router-view></router-view>
        </div>
    </template>
    
    <script>
        export default {
            name: 'Message',
            data() {
                return {
                    msgList: [
                    	{id: '001', message: '消息001'},
                        {id: '002', message: '消息002'},
                        {id: '003', message: '消息003'},
                    ]
                }
            },
        }
    </script>
    

    2.3、News与Message的子路由组件——Detail组件

    <template>
        <div id="detail">
            <h2>Detail组件内容如下</h2>
            <!-- News -->
            <ul v-if="$route.query.isShow">  // 在模板标签中,直接使用$route来获取参数,如果在method、computed等等选项属性中则需要this.$route.query
                <li>消息编号:{{$route.query.id}}</li>
                <li>消息内容:{{$route.query.content}}</li>
            </ul><br>
    
            <!-- Message -->
            <ul v-if="$route.params.isShow">
                <li>消息编号:{{$route.params.id}}</li>
                <li>消息内容:{{$route.params.content}}</li>
            </ul><br>
        </div>
    </template>
    
    <script>
        export default {
            name: 'Detail',
        }
    </script>
    <style scoped>
        #detail>ul {
            margin-top: -20px;
        }
    
        #detail li {
            width: 60%;
            margin: 0;
            padding: 0;
            text-align: left;
        }
    </style>
    

    三级路由的效果:三级路由效果图

    五、总结

    看到这里了,相信路由已经很好理解了。
    掌握关键步骤,其实多层嵌套路由就很容易理解,无非就是持续套娃,其原理还是一样。

    1、vue中使用vue-router插件的步骤
    	1.1、下载:npm i vue-router
    	1.2、配置:新建router文件夹,新建index.js文件,导入插件、组件,配置相关路由,导出。
    	1.3、使用:在main.js中引入插件,Vue.use()使用插件,在Vue中添加router属性。
    2、多级路由
    	2.1、在index.js文件中使用children:[]来实现路由嵌套。
    3、路由传参
    	3.1、query和params传参都有字符串和对象传参两种形式。
    	3.2、关于点击效果建议使用exact-active-class。
    	3.3、注意:params对象传参只能使用name属性指向路由path属性。
    
    展开全文
  • Flutter路由传参

    2021-08-16 18:22:13
    Flutter路由传参1、普通路由 1、普通路由 //main.dart routes: routes,
  • react路由传参问题

    2021-08-05 11:53:24
    之前在工作中开发一个react项目的时候遇到路由传参的问题,当时因为基础不好,解决这个问题用了好久,还产生了一个bug,特此记录一下。 项目中路由跳转使用的是hashRouter,由于是详情页面跳到审批页面,携带的参数...
  • 最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决;Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name...
  • rn 路由传参、navigation传参

    千次阅读 2020-03-31 09:06:07
    传参: (1)传参数 (1)发送 函数式传递 function xx({navigation}) { ... //发送 {navigation.navigate('路由名',{键值对})} } 路由声明处传递 <...
  • uniapp获取路由传参

    2021-08-30 11:35:05
    uniapp获取路由传参 在跳转的页面接受参数 onLoad(option){ console.log(option) }
  • 前言:路由传参在vue项目中是很常用的 让我们用最简单的方法理解下3种路由的传参方式 先看一下用到到文件 有哪些 第一种 布尔值传参 1.需要在router文件夹中的index文件 配置路由 { //布尔值传参 path:'/A/:id', ...
  • web前端 中
  • 二、路由传参 两种情况:params 和 query 都可以在目标组件的生命周期里,通过 this.$route 进行获取 methods:{ goTheme(item){ //点击图片跳转主题界面 // this.$router.push({path:'/theme/123'})...
  • 1. 路由(页面管理)uni-app 页面路由全部交给框架统一管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式(类似小程序在app.json中配置页面路由)。所以 uni-app 的路由用法与 Vue Router 不同(如仍希望...
  • 路由传参踩过的坑

    2021-09-10 10:39:49
    我先形容一下,从这个页面(图1)点击去,直接激活相应的vant-tab(如图2),因为我是用的路由传参,实现了这个功能,但是有个问题就是我在这个页面点击多次其他的vant-tab,浏览器会有history,所以我点返回只会改变...
  • React路由传参 解释:路由传参完成的是组件之间的数据传递(组件传值) 1)、params ​ 路由配置: <Route path='/Inbox/:id' component={Inbox} /> ​ 路由跳转(传值): 声明式导航: <NavLink to={...
  • Vue路由传参以及接收参数的几种方法 vue路由传参方式可以划分为params传参、query传参和url字符串拼接(编程式导航) 方法一:query //传参 this.$router.push({ path: '/deviceInfo', query: { deviceId: '...
  • react及hook路由传参

    2021-09-18 16:45:46
    总结 React-Router 页面路由传参的四种方式,对比四种传参方式的优缺点,更好的去选择合适的方式去传参。 1.params 优点: 刷新地址栏,参数依然在。 缺点: 只能传字符串且传值太多的话,url 会又长又不美观。 // ...
  • vue路由传参

    2020-09-15 17:17:21
    路由传参有两种形式,params,和query。 路由 { path: '/lycc', name: 'lycc', component: lycc, children:[ { path: '/lycc1/:tid', name: 'lycc1', component: lycc1 }, { path: '/lycc2', name:...
  • uni-app路由传参及获取

    2021-10-21 14:17:30
    // 传参 uni.navigateTo({ url: "/url?id=" +'1&name=' +'张三', }); // 获取参数 onLoad: function (option) { console.log(option.id) console.log(option.name) },
  • Vue3.0路由传参

    千次阅读 2021-04-12 13:44:19
    Vue 之路由传参 在 vue3.0 里面使用路由必须要引入 useRouter 和 useRoute import { useRoute, useRouter } from 'vue-router' 秉承谁长谁先死,Router 长 所以他负责跳转,Route 负责接收数据 传参使用query和params...
  • vue路由传参总结

    2020-10-23 13:32:26
    一、动态路由传参 使用场景: login/userId/1001 通过参数判断用户权限 使用步骤: 1、new VueRouter({ routes: [ { path: '/user/:id/:age', component: User }, ] }) 2、<router-link to="/user/1001/...
  • vue3.0路由传参

    2021-10-28 20:53:56
    定义 路由组件中 首页组件 let Index = { template: ` <div> // to 是跳转后面是 要跳转的地址 <router-link to="/list?type=hot">跳转到列表页</router-link> <h1>首页</h1>...
  • react路由传参的几种方式

    千次阅读 多人点赞 2020-03-10 11:25:28
    第一种传参方式,动态路由传参 通过设置link的path属性,进行路由的传参,当点击link标签的时候,会在上方的url地址中显示传递的整个url <Link to='/home?name=dx'>首页</Link> 如果想真正获取到传递...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,217
精华内容 11,286
关键字:

路由传参

友情链接: iOS-Tone-Generator.zip