2月11日-vue-cli 路由(3) 命名路由和编程式导航

Profile Picture
Published on Feb 12, 2020🌏 Public

命名路由编程式导航

命名路由

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

名称不可以出现相同。

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

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

编程式导航

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

声明式--组件标签编程式--脚本
<router-link :to="参数"></router-link>this.$router.push(参数)
生成a标签在脚本中调用

声明式:

  //字符串,要跳转的路径
  <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>