命名路由以及编程式导航

var myRouter = new VueRouter({
   //routes是路由规则数组
routes: [
    //通过name属性为路由添加一个别名
    { path: "/user/:id", component: User, name:"user"},
    
]
})

//添加了别名之后,可以使用别名进行跳转

<router-link to="/user">User</router-link>

<router-link :to="{ name:'user' , params: {id:123} }">User</router-link>

//还可以编程式导航

myRouter.push( { name:'user' , params: {id:123} } )

B.编程式导航(★★★)

页面导航的两种方式:A.声明式导航:通过点击链接的方式实现的导航B.编程式导航:调用js的api方法实现导航

Vue-Router中常见的导航方式:

this.$router.push("hash地址");

this.$router.push("/login")

this.$router.push({ name:'user' , params: {id:123} });

this.$router.push({ path:"/login" });

this.$router.push({ path:"/login",query:{username:"jack"} });

this.$router.go( n );//n为数字,参考history.go

this.$router.go( -1 );

 

posted @   Harry宗  阅读(48)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示