首页 > 其他 > 详细

vue-router 命名路由&编程式导航

时间:2020-12-30 23:59:25      阅读:61      评论:0      收藏:0      [点我收藏+]

命名路由的配置规则

为了更加方便的表示路由的路径,可以给路由规则起一个别名,即为“命名路由”。

在链接路由时通过 :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 }})

编程式导航

页面中导航的两种方式

  • 声明式导航:通过点击链接实现导航的方式,叫做声明式导航(例如:普通网页中的<a></.a>链接或vue中的<router-link></router-link>)
  • 编程式导航:通过调用JavaScript形式的API实现导航的方式,叫做编程式导航(例如:普通网页中的location.href)

编程式导航基本使用方法

常用的编程式导航API如下:

  • this.$router.push(‘hash地址‘)
  • this.$router.go(n)
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‘ } })

 

vue-router 命名路由&编程式导航

原文:https://www.cnblogs.com/limu-zy/p/14213921.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!