router路由跳转以及参数拼接

1. 路由跳转

1.1 声明式

<router-link :to="...">
// 使用 `<router-link>` 创建 a 标签来定义导航链接

1.2 编程式

1.2.1 编程式-router.push

router.push(...)
// 想要导航到不同的 URL，则使用 `router.push` 方法。
// 这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
// 参数可以是一个字符串路径，或者一个描述地址的对象

// 参数为一个字符串路径
router.push('/project')

// 参数为一个描述地址的对象
router.push({
    name: 'AdminsList'  // 常用

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

// 注意：如果提供了 `path`，`params` 会被忽略，上述例子中的 `query` 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 `name` 或手写完整的带有参数的 `path`
const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

1.2.2 编程式-router.replace

// 跟 `router.push` 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
// 跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)
    router.replace({
           name: 'RouterTest'
         // path: '/routerTest'  // name和path都可
    })

1.2.3 编程式-router.go(n)

// 向前或者向后跳转n个页面，n可为正整数或负整数
// 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 `window.history.go(n)`

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

2. 路由参数拼接

2.1 params 传参

const router = new VueRouter({
     {
      // 动态路径参数 以冒号开头
        path: 'params/:id',
        name: 'RouterParams',
        meta: {
          title: '路由测试-params'
        },
        component: () => import('@/views/test-1/RouterParams.vue')
     },
})
// 一个“路径参数”使用冒号 `:` 标记。当匹配到一个路由时，参数值会被设置到 `this.$route.params`，可以在每个组件内使用

router.push({
      name: 'RouterParams',  // 注意：params传参配置的是name，在params中配置path无效
      params: {
        id: 1
      }
})  // http://localhost:8080/routerTest/params/1

// 在模板中获取参数值
$route.params.id

// 在js中获取参数值
this.$route.params.id

2.2 query 传参

// query传参数 (类似get,url后面会显示参数)
    {
        path: 'query',
        name: 'RouterQuery',
        meta: {
          title: '路由测试-query'
        },
        component: () => import('@/views/test-1/RouterQuery.vue')
      }

    router.push({
      // name: 'RouterQuery',  
      path: '/routerTest/query',  // query传参，使用path、name都可
      query: {
        id: 1
      }
    })   // http://localhost:8080/routerTest/query?id=1
// 在模板中获取参数值
$route.query.id

// 在js中获取参数值
this.$route.query.id

2.3 params 和 query区别

标题	传参	路径显示	路由配置
params	传参时path无效	跳转之后页面 url后面不会拼接参数, params/1	params在路由配置时必须设置
query	传参时path和name都可以使用	跳转之后页面 url后面会拼接参数,类似 query?id=1	query在路由配置不需要设置参数

params、query不设置也可以传参，但是params不设置的时候，刷新页面或者返回参数会丢失，query并不会出现这种情况