命名路由编程式导航

命名路由

定义路由规则时，可以通过name去设定路由规则的名字。

名称不可以出现相同。

[
      {
        path: '/login',
        component: c1,
        name:'login'
      },
      {
        path: '/chat/:name',
        component: c2,
        name:'chat'
      }
    ]

有了路由名称后，我们去做跳转时，就可以根据路径或者根据名称去跳转。

编程式导航

在vue-router中，有两种方式可以实现页面间跳转。

声明式：

  //字符串,要跳转的路径
  <router-link :to="'/chat'">跳转</router-link>
  //对象形式去传递路径
  <router-link :to="{path:'/chat'}">跳转</router-link>
  //通过路由名称去跳转
  <router-link :to="{name:'chat'}">跳转</router-link>
  //传递params参数,要配合name使用
  <router-link :to="{name:'chat',params:{a:1,b:2,name:'123'}}">跳转</router-link>
  //传递query,配合path或者name都可以使用
  <router-link :to="{path:'/chat',query:{a:1,b:2,name:'123'}}">跳转</router-link>

编程式跳转

  //字符串,要跳转的路径
  this.$router.push('/chat')
  //对象形式去传递路径
  this.$router.push({path:'/chat'})
  //通过路由名称去跳转
  this.$router.push({name:'chat'})
  //传递params参数,要配合name使用
  this.$router.push({name:'chat',params:{a:1,b:2,name:'123'}})
  //传递query,配合path或者name都可以使用
  this.$router.push({path:'/chat',query:{a:1,b:2,name:'123'}})

实例：

<router-link :to="'/chat'">跳转</router-link>
    <div @click="$router.push('/chat')">跳转</div>
    <br />
    <router-link :to="{path:'/chat'}">跳转</router-link>
    <div @click="$router.push({path:'/chat'})">跳转</div>
    <br />
    <router-link :to="{name:'chat'}">跳转</router-link>
    <div @click="$router.push({name:'chat'})">跳转</div>
    <br />
    <router-link :to="{name:'chat',params:{a:1,b:2,name:'123'}}">跳转</router-link>
    <div @click="$router.push({name:'chat',params:{a:1,b:2,name:'123'}})">跳转</div>
    <br />
    <router-link :to="{name:'chat',params:{a:1,b:2,name:'123'},query:{a:1,b:2,name:'123'}}">跳转</router-link>
    <div @click="$router.push({name:'chat',params:{a:1,b:2,name:'123'},query:{a:1,b:2,name:'123'}})">跳转</div>