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}});

组件重定向

配置重定向

修改路由配置

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

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

重定向到组件

设置对应路径即可

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

带参数的重定向

修改路由配置

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

重定向到组件

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