VUE路由Router命名路由以及编程式导航

命名路由:给路由取别名

案例:

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} } )

编程式导航(★★★)

页面导航的两种方式:
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 );
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • PS:转载请注明出处作者: TigerChain地址https://www.jianshu.com/p/9a7d7...
    TigerChain阅读 64,346评论 9 218
  • 那这次呢?我决定直接就先放一个小小demo上来 其实我们在引入vue-router插件那一刻,我们的网页就已经附带...
    看物看雾阅读 945评论 0 1
  • 前言 vue-router是什么:是vue.js官方的路由管理器和vue.js的核心深度的集成,让开发者更加简单的...
    GUAN_one阅读 3,893评论 0 2
  • 公主梦 每个人在小时候都会有一个梦——公主梦,而公主梦中,属于公主的王子在哪。。。 当在每个女孩心中都有一个公主梦...
    你若未央阅读 1,223评论 3 7
  • 游戏: 【微派桌游助手】 订花: 【FlowerPlus】 【花点时间】 【门客生活】 美味 【味觉大师】很多大厨...
    ach7阅读 446评论 0 0

友情链接更多精彩内容