vue路由跳转

1、编程式路由

基本格式：

this.$router.push(...)

1.1、字符串

this.$router.push('home')

1.2、对象

要想传递参数要以对象的方式来写

this.$router.push({name: 'article', params: {articleId: '1'}})
this.$router.push({path: '/article', query: {articlrId: '1'}})

需要注意的是

• name

  与

  params

  ,

  path

  与

  query

  相对应，
• 在使用

  query

  查询参数后路由会发生变化

  /article?articleId=1

  ，
• 命名路由搭配

  params

  ，刷新页面参数会丢失
• 查询参数搭配

  query

  ，刷新页面数据不会丢失
• 接受参数使用

  this.$router

  后面就是搭配路由的名称就能获取到参数的值
• 最后可以在新的页面通过

  this.$route.params

  以及

  this.$route.query

  来获取传递的参数对象。

2、声明式导航

基本格式：

<router-link :to='...'

在不用传递参数的情况下可以直接使用字符串的形式：

<router-link to='/home'

与编程式导航一样也可以通过对象的方式来传递参数

<router-link :to='{name: 'article', params: {articleId: '1'}}'
<router-link :to='{path: '/article', query: {articleId: '1'}}'

动态路由匹配

设置路由匹配规则：

routers: [
{path: '/user/:id', component: 'User'}
]

在路由跳转的时候

/user/1

user/2

设置路由跳转

let userId = 123
<router-link :to='`/user`${userId}'