2月11日-vue-cli 路由(3) 命名路由和编程式导航
命名路由编程式导航
命名路由
定义路由规则时,可以通过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>