编程式导航(路由传值)

路由间传值:有这种方法,一种是显示在地址导航栏里,一种是不显示地址导航里

1.params形式 :参数不显示在地址栏 

(1)在app.vue中写入方法,点击按钮跳转到HelloWord的页面

data(){
    num:2
}

methods:{
      goback(){
        this.$router.go(-1)
      },
      goHome(){
//        this.$router.push('/');
        //这种形式参数不显示在地址栏
        this.$router.push({name:'HelloWorld',params:{userId:this.num}})

        //这种形式显示在地址栏
        //this.$router.push({path:'/',query:{userId:this.num,name:'judy'}})
      },
      hi2(){
        this.$router.push('/hi2'); //跳转到hi2
      }
    }

 (2)上面的在HelloWorld.vue中获取参数值{{$route.params.userId}}

<h4>第一种方式:获取的参数:{{$route.params.userId}}</h4>

2.query形式:参数显示在地址栏

(1)写入js

//这种形式显示在地址栏
this.$router.push({path:'/',query:{userId:this.num,name:'judy'}})

(2)在html中获取

<h4>您获取的参数:{{$route.query.userId}}</h4>

每日小知识点:

vue-router项目启动,把url中的#好去掉

在router/index.js中写入 mode:'history';

export default new Router({
    mode:'history', //项目启动把url带的#号去掉
    router:[
        {        //每一个链接都是一个对象
          path: '/', //链接路径
          name: 'HelloWorld',  //路由名称
          component: HelloWorld  //对应的组件模版
        }
    ]
})

作为一个程序员,最郁闷的事情是,面对一个代码块,却不敢去修改。更糟糕的是,这个代码块还是自己写的。

### Vue 2 中通过路由递参数 在 Vue 2 应用程序中,可以通过多种方式利用 `vue-router` 来递参数给不同的页面或组件。一种常见的方式是在路径中定义动态段,这些动态段可以作为参数被捕获并用于渲染特定的内容。 #### 使用动态路由匹配 当配置路由时,在路径字符串中加入冒号前缀的占位符来表示该位置是一个可变的部分: ```javascript const routes = [ { path: '/author/:id', component: Author, }, ]; ``` 在这个例子中,`:id` 是一个动态片段,它允许任何(除了斜杠)被放置在此处,并且这个会被捕获为 `$route.params.id`[^1]。 对于上述提到的 `Author` 组件模板而言,其能够展示入的具体作者信息如下所示: ```html <div> Author: {{ $route.params.author }} </div> <router-view></router-view> ``` 这里不仅展示了当前 URL 路径中的 `author` 参数,还嵌套了另一个 `<router-view>` 实例以便进一步加载子级视图内容。 #### 导航至带参链 为了导航到带有参数的目标路由,既可以采用编程式导航也可以借助 HTML 锚点标签配合 `v-bind` 或者直书写完整的相对/绝对路径形式: - **编程式导航** ```javascript this.$router.push({ name: 'user', params: { userId: 123 }}) ``` - **声明式导航 (HTML)** ```html <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> ``` 这两种方法都可以确保目标路由收到预期的数据,从而正确显示所需的信息[^2]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值