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

命名路由:给路由取别名

案例:

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

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

User
User

还可以编程式导航

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

你可能感兴趣的:(VUE路由Router命名路由以及编程式导航)