Vue的路由

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

参数传递

第一种

router

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

a传递

<router-link :to="{name: 'UserProfile', params: {id: 1}}">个人信息</router-link>
或
<router-link to="/user/info/2">

b接受

{{$route.params.id }}

第二种

router

{path: '/user/profile/:id', name:'UserProfile', component: UserProfile, props: true}

a传递

<router-link :to="{name: 'UserProfile', params: {id: 1}}">个人信息</router-link>
或
<router-link to="/user/info/2">

b接受

为目标组件增加 props 属性，代码如下：

  export default {
    props: ['id'],
    name: "UserProfile"
  }

模板中使用

{{ id }}

第三种 编程式导航

a->b

rounter

b:
    {
      // 路由路径
      path: '/main/:username',
      xxx
    }

b接受：

{{$route.params.username}}

a传递：

// 使用 vue-router 路由到指定页面，该方式称之为编程式导航
this.$router.push({name:'Main',params:{username:this.form.username}});

组件重定向

配置重定向

修改路由配置

    {
      path: '/main',
      name: 'Main',
      component: Main
    },
    {
      path: '/goHome',
      redirect: '/main'
    }

说明：这里定义了两个路径，一个是 /main ，一个是 /goHome，其中 /goHome 重定向到了 /main 路径，由此可以看出重定向不需要定义组件；

重定向到组件

设置对应路径即可

<router-link to="/goHome">回到首页</router-link>

带参数的重定向

修改路由配置

{
  // 首页
  path: '/main/:username',
  name: 'Main',
  component: Main
},
{
  path: '/goHome/:username',
  redirect: '/main/:username'
}

重定向到组件

<router-link to="/goHome/Lusifer">回到首页</router-link>

以上是 Vue的路由 的全部内容， 来源链接： utcz.com/z/377629.html

回到顶部