命名路由的配置规则
为了更加方便的表示路由的路径,可以给路由规则起一个别名,即为“命名路由”。
在链接路由时通过 :to 绑定路由,name 属性用来确定链接的路由名称,params 传递参数
const router = new VueRouoter({ router: [ { path: ‘/user/:id‘, name: ‘user‘, component: User } ] })
<router-link :to="{ name: ‘user‘, params: { id: 123 } }">User</router-link> router.push({ name: ‘user‘, params: { id: 123 }})
编程式导航
页面中导航的两种方式
编程式导航基本使用方法
常用的编程式导航API如下:
const User = { template: ‘<div><button @click=“goRegister”>跳转到注册页面</button></div>‘, methods: { goRegister: function(){ //用编程的方式控制路由跳转 this.$router.push(‘/register‘); } } }
router.push() 方法的参数规则
1 //字符串(路径名称) 2 router.push(‘/home‘) 3 //对象 4 router.push({ path: ‘/home‘ }) 5 //命名空间 6 router.push({ name: ‘/user‘, params: {userId: 123 }}) 7 //带查询参数,变成/register?uname=yzy 8 router.push({ path: ‘/register‘, query: { uname: ‘yzy‘ } })
原文:https://www.cnblogs.com/limu-zy/p/14213921.html