Vue 路由组件 页面传递参数

文章目录

• • 1 vue路由传参
  • • $route对象
    • props传递
    • • 布尔模式
      • 对象模式
      • 函数模式
    • 通过属性来传值
  • 2 编程式组件路由传值
  • • 编程式路由传参

1 vue路由传参

vue路由传参，是页面通信的重要组成部分，而掌握路由传参，用到Vue提供的一个重要对象 $route 。

切记$route不是$router

$route对象

  {
        //路由组件传递参数
        path:'/about/chilrenRoute2/:id',
        component:chilrenRoute2
      }

页面传参

  <router-link to="/about/chilrenRoute2/123"> chilrenRoute2 </router-link>

如果是根据页面便利的对象传入

<!--  es5 语法-->
<router-link to="'/about/chilrenRoute2/${xxxx}'"> chilrenRoute2 </router-link>
<!--  es6语法-->
<router-link to="`/about/chilrenRoute2/${xxxx}`"> chilrenRoute2 </router-link>

页面获取

 通过 $route对象， 获取路由组件传递参数值 /about/chilrenRoute2/:id 路由的id值:  {{ $route.params.id }}

如图

props传递

布尔模式

如果 props 被设置为 true，route.params 将会被设置为组件属性

{
        //路由组件传递参数
        path:'/about/chilrenRoute2/:id',
        component:chilrenRoute2,
        props: true
      }

页面js

  export default {
    props:['id']
  }

获取值

  <p>  通过 props传递——布尔模式 ， 获取路由组件传递参数值 /about/chilrenRoute2/:id 路由的id值:  {{ this.id }}</p>

对象模式

  {
        //对象模式
        path:'/about/chilrenRoute2/:id',
        component:chilrenRoute2,
        props: { userName: 'userName'}
      }

js

  export default {
    props:['userName']
  }

获取

  <p>  通过 props传递——对象 ， 获取路由组件传递参数值 /about/chilrenRoute2/:id 路由的id值:  {{ this.userName }}</p>

函数模式

函数模式的路由配置中，props属性是函数，这个函数返回一个对象。
在函数模式中，可以有一个参数，这个参数就是route对象，里面存储的是路由的相关携带信息。

     {
        //函数模式
        path:'/about/chilrenRoute2/:id',
        component:chilrenRoute2,
        props: function (route){

          //route 是 $route对象
            return {
              userName:'userName',
              querys: route.params.id
            }

        }
      }

js

  export default {
    // props:['id']
    // props:['userName']
    props:['userName','querys']
  }

获取

  <p>  通过 props传递——函数模式 ， 获取路由组件传递参数值 /about/chilrenRoute2/:id 路由的id值:  {{ this.userName }} ,  {{ this.querys }} ,  {{ $route.params }}</p>

通过属性来传值

传值

  <router-view msg="msg 属性传值"></router-view>

js 以及 获取

结果

2 编程式组件路由传值

除了使用上面 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

编程式提供两种跳转方式

• $router.push(location, onComplete?, onAbort?)
• $router.replace(location, onComplete?, onAbort?)

push 和 replace 最大区别在于push 会向 history 添加新纪录，也就是浏览器历史记录；而replace不会。

若使用了 replace 跳转页面可以使用 router.go(n) 来控制页面返回跳转，相当于 window.history.go(n) 方法。
其中的n表示向前向后后退多少步。

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

费话不多少 直接上代码

  <p @click="tiao_zhaun1"> 通过编程式路由   this.$router.push("routeCompoment1") 跳转页面</p>

  <p @click="tiao_zhaun2"> 通过编程式路由 this.$router.replace("routeCompoment2") 跳转页面</p>

js

 export default {
    methods:{
      tiao_zhaun1(){
        this.$router.push("routeCompoment1")
      },
      tiao_zhaun2(){
        this.$router.replace({path:"routeCompoment2"})
      } ,
    }
  }

在路由配置js中配置路由

 routes:[
//其他页面跳转配置略
    {
      path:"/routeCompoment1",
      name:'routeCompoment1',
      component:routeCompoment1
    },
    {
      path:"/routeCompoment2",
      name:'routeCompoment2',
      component:routeCompoment2
    }
    ]

如图

一开始我们请求页面 路径为http://localhost:8080 访问成功后是 http://localhost:8080/#/about（这里我设置默认跳转路径）
当我们点击 开始点击 home 页面路径变为 http://localhost:8080/#/home
同时routeCompoment1 跳转到

然后点击浏览器后退 直接返回上一步页面 http://localhost:8080/#/home

重新请求http://localhost:8080/ 路径后 点击home后
点击 routeCompoment2 的时候 直接回到 http://localhost:8080/#/about

编程式路由传参

下面两种传参都可以，代码应该可以看得懂！

js代码

 methods:{
 
  //第一种
      tiao_zhaun3() {
        this.$router.push({
          path:'/test/routeCompoment3?id=233333111'
        });
      },
       //第二种
      tiao_zhaun4() {
        this.$router.push({
          path: '/routeCompoment4',
          query: {
            ids: '2333333333',
            name: 'Tizzy'
          }

        });
      }

}

在路由配置js中配置路由

   {
      path:"/test/routeCompoment3",
      name:'routeCompoment3',// 组件名 可写可不写
      component:routeCompoment3
    },
    {
      path:"/routeCompoment4",
      name:'routeCompoment4',
      component:routeCompoment4
    },

页面效果

页面获取值

通过路由对象获取值 {{$route.query.id}}

第一种

第二种

学习参考

router.vuejs.org/zh-cn/
developer.mozilla.org/zh-CN/docs/…
www.jianshu.com/p/81ed5a90b…