精华内容
下载资源
问答
  • vue 动态路由传参
    千次阅读
    2022-04-01 13:28:26

    路由

    {
    	path: '/newSentiment/details/:id',
    	name: 'details',
    	component: details
     }
    

    跳转

    //  直接调用$router.push 实现携带参数的跳转
        this.$router.push({path: `/newSentiment/details/${id}`})
    

    详情

    //获取参数方法
    id:this.$route.params.id
    
    更多相关内容
  • 主要介绍了vue动态路由配置,vue路由传参的方式,文中给大家提到了router-link这个组件的相关知识,需要的朋友可以参考下
  • Vue动态路由传参和监听路由

    千次阅读 2020-04-20 10:21:44
    Vue动态路由传参 query传参 params传参 //定义Detail路由 { path: '/detail/:id', name: 'Detail' component: () => import('@/views/Detail.vue') } 1.query方式传参和接收参数 传参: this.$router.push({...

    Vue动态路由传参

    • query传参
    • params传参
    //定义Detail路由
    {
         path: '/detail/:id',
         name: 'Detail'
         component: () => import('@/views/Detail.vue')
    }
    

    1.query方式传参和接收参数

    传参:

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

    接收参数:

    this.$route.query.id
    

    Tips:

    传参是this. r o u t e r , 接 收 参 数 是 t h i s . router,接收参数是this. router,this.route,这里千万要看清了!!!

    2.params方式传参和接收参数

    传参:

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

    接收参数:

    this.$route.params.id
    

    Tips:

    params传参,push里面只能是 name:‘xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!!!

    另外,二者还有点区别:

      1. 接收参数
    // query通过this.$route.query接收参数
    created () {
        const id = this.$route.query.id;
    }
     
    // params通过this.$route.params来接收参数
    created () {
        const id = this.$route.params.id;
    }
    
      1. 切换路由
    // query通过path切换路由
    <router-link :to="{path: 'Detail', query: { id: 1 }}">前往Detail页面</router-link>
    // params通过name切换路由
    <router-link :to="{name: 'Detail', params: { id: 1 }}">前往Detail页面</router-link>复制代码
    

    简单说query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,浏览器刷新页面不会消失,而params相当于post请求,参数不会在地址栏中显示,浏览器刷新页面后消失。

    3.this. r o u t e r 和 t h i s . router和this. routerthis.route有何区别?

    在控制台打印两者可以很明显的看出两者的一些区别:

    clipboard.png

    • 1. r o u t e r 为 V u e R o u t e r 实 例 , 想 要 导 航 到 不 同 U R L , 则 使 用 router为VueRouter实例,想要导航到不同URL,则使用 routerVueRouterURL使router.push方法。
    • 2.$route为当前router跳转对象,可以获取name、path、query、params等。

    Vue监听路由

    方式一:监听$router

    复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch(监测变化) $route 对象:

      watch: {
        '$route' (to, from) {
          // 对路由变化作出响应...
        }
      }
    

    方式二:唯一值 key 属性

    Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可

    <router-view :key="key"></router-view>
    
    computed: {
        key() {
            return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
        }
     }
    

    使用computed属性和Date()可以保证每一次的key都是不同的,这样就可以如愿刷新数据了。

    实践

    1. 定义路由

          {
              path: '/hse/problem/prMain/deal/:id',
              component: () => import('@/views/hse/Problem/PrDeal.vue'),
              meta: {
                keepAlive: true
              }
            },
    

    2. 动态路由传参

     	handleDeal(id){
                  this.$router.push(
                    {
                      path: `/hse/problem/prMain/deal/${id}`,
                      params: {id: id}
                    }
                  )
                }
    

    3. 监听路由

              watch:{
               //监听路由
               $route(){
                 if(this.$route.params!==null){
                   this.paramId = this.$route.params.id;
                 }
               },
                paramId(newVal,oldVal){
                  if(newVal !== undefined && newVal !== null){
                      //初始化数据	
                      this.init();
                  }
                }
              }
    

    4. init方法初始化数据

    methods:{
                  //初始化数据
                  init(){
                    let vm = this;
                    vm.$nextTick(()=>{
                      vm.$axios.get(`/hse/sim/prProblem/v1/get/${vm.dataId}`).then(reply=>{
                        vm.form = reply.data;
                      }).catch(e=>{
                        vm.$toast.fail(e);
                      })
                    })
                  }
    }
    
    展开全文
  • vue动态路由传参

    千次阅读 2018-09-03 13:41:32
    动态路由传参:  当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个"共用"的组件,并且还要传参数,渲染不同的数据,这就要用到动态路由跟...

    动态路由传参:

      当我们很多个页面或者组件都要被很多次重复利用的时候,我们的路由都指向同一个组件,这时候从不同组件进入一个"共用"的组件,并且还要传参数,渲染不同的数据,这就要用到动态路由跟路由传参了!

    <router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址,默认渲染成带有正确链接的 <a> 标签,可以通过配置 tag 属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名。

    在配置路由路径后加个:id(id可随便取名,标识),这个属性id可以在$route.params.id中获取

    接着往下看,带参数的路由,跟获取传来的参数值

    当router-link被激活点击时,会将当前的to的值push到router对象当中(路由栈),所以这个值可以是string也可以是obj

    传参数的时候,我们就写成对象的形式,用到v-bind的js表达式

     

    此时整个的理解可以为:我是partical组件过来的,

    在partical组件当中去获取这个参数值跟id的值

     

     

     

     

    展开全文
  • 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的功能还是比较强大的 正数可以前进  负数可以后退  里面的数字可以决定前进后退的层次

    展开全文
  • Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin",  //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上...
  • 这就要用到动态路由跟路由传参了! 首先我们来了解下router-link这个组件: 简单来说,他是个导航器,利用to属性导航到目标组件,并且渲染的时候会自动生成一个a标签,当然官方也有说明,加个tag标签属性就...
  • Vue路由动态传参

    2021-07-05 21:20:38
    根据导航菜单实现点击跳转不同组件携带所需要使用的参数,因为Vue是单页面,所以跳转时时组件之间的跳转,这时就可以使用路由动态传参来解决这个问题,以下是路由动态传参的两种方式 一.Params(通过路由属性中的...
  • 动态路由参数的坑 在跳路由:/user/1 到 /user/2中,id由1变为2,视图中的id还是1,没有变为2 解决方案 使用watch解决 watch: { $route(to,from) { this.id = to.params.id } } 使用beforeRouteUpdate解决 ...
  • 路由的配置 { //路由的配置 接收一个... import('../views/About.vue'), props:true } 接收参数 第一种 : $route.params ... <div> {{$route.params.id}} </div> 第二种 : props接收 ... <
  • vue中如何实现动态路由传参

    千次阅读 2021-09-02 10:45:32
    一、vue路由基础用法: 1 .安装 npm install vue-router --save 2 .main.js中 //Vue路由:引入 import VueRouter from 'vue-router' Vue.use(VueRouter) //Vue路由:引入并创建组件 import BYHome from './...
  • Vue3.0路由传参

    2022-05-01 22:29:01
    传参。直接push query 或者 param也行 const router = useRouter(); const handleEdit = (index, row) => { router.push({path:"/publishArticle",query: {id:row.articleId}}); // editVisible.value = ...
  • vue中的动态路由传参

    2021-04-18 18:16:12
    vue中的动态路由传参 对于常见的路由动态传参 有两种方式一种为 query的导航传参方式 通过 path和query的结合 ,参数一般可以在地址栏中看到 在组件中通过 $route.query进行参数的获取,另一种方式就是 组件name和...
  • vue动态路由配置,vue路由传参

    万次阅读 2018-05-23 09:28:44
     这就要用到动态路由跟路由传参了! 首先我们来了解下router-link这个组件:  简单来说,它是个导航器,利用to属性导航到目标组件,并且在渲染的时候会自动生成一个a标签,当然官方也有说明,加个tag标签属性就...
  • 在配置路由时,路由路径上添加参数,既配置成动态路由。在修改操作时,就常用到动态路由配置。 配置动态路由: let update= { path: '/update/:uid/:name', name: 'Update', component: () => import('@/...
  • vue3.0路由传参

    2021-10-28 20:53:56
    定义 路由组件中 首页组件 let Index = { template: ` <div> // to 是跳转后面是 要跳转的地址 <router-link to="/list?type=hot">跳转到列表页</router-link> <h1>首页</h1>...
  • 点击列表中的某一个单元格跳转到对应列表的详情页,并携带参数,便于详情页获取数据 个人信息表 在生命周期函数methods中使用: 一、 goList(id){ this.$router.push({path:`/line/${id}`}) } 需要对应路由配置如下...
  • Vue3路由传参(query)

    2022-04-14 10:56:30
    import { useRouter } from "vue-router"; 2.创建路由对象 const route = new useRouter() 3.在组件中绑定方法 <goods-list-item v-for="(item,index) in goods.list" :product="item" :key="index" @...
  • 主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • params传参(4种) 1.给路由的规则中配置接收参数 { path: '/details/:yaxu', name: 'details', component: () => import( '../views/Details.vue') }, 2.发送数据 (1)编程式导航发送数据2种写法 1...
  • 本文实例讲述了vue路由传参的基本实现方式。分享给大家供大家参考,具体如下: 前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转。传参方式可划分为 params 传参和 query 传参,而 ...
  • Vue Router路由传参

    2021-09-08 17:07:15
    1、第一种方法:拼接方式: methods:{ v_test(id) {//直接调用$router.push 实现携带参数的跳转 ?this.$router.push({path: `/detail/${id}`,}...2、第二种方法:params传参 (通过路由属性中的name来确定匹配的路由
  • 页面间跳转的传参方式主要分为params和query两种: params: 第一种: 在路由管理的页面,通过在path里面事先命名要传的参数: export default new Router({ routes: [ path: "/HelloWorld/:id", name: "Hello...
  • 路由传参 1. 通过路由属性中的name来确定匹配的路由,通过params来传递参数 父组件 this.$router.push传递参数 //html <button @click="toChild"> </button> //方法 toChild(){ this.$router.push...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,831
精华内容 6,732
关键字:

vue动态路由传参