vue单页面路由跳转

分两种情况
一、跳转后页面的地址为 “/b”

   {
          path: '/b',
          name: 'b',
          component: B
  },

从a页面跳转，有两种方法
（1）通过path

 this.$router.push({
        path:'/b',
         query:{
            id: 12
         }
  })

此时，B页面上的router信息是这样子的

image.png

通过query可以获取到这个对象
地址栏的地址是
http://localhost:8080/#/b?id=12

(2)通过路由name

    this.$router.push({
        name:'b',
        params:{
            id: 12
        }
    })

这个时候B页面的信息是这样的

image.png

通过params可以拿到信息

地址栏的地址是
http://localhost:8080/#/b

但是值得注意的是刷新页面之后，params里面会变成空对象
（3）window.open

                window.open('#/b?id=12')

通过query取参，刷新页面不会丢失

总结：

//name 和params搭配使用 刷新之后那边获取值会获取不到
//path 和query搭配使用 fullPath:/b?id=12

二、跳转后地址是 ’/aboutA/111'

 {
          path: '/aboutA/:id',
          name: 'aboutA',
          component: AboutA
  },

（1)直接通过path

 this.$router.push({
         path:'/aboutA/111'
  })

页面信息显示为

image.png

可通过params获取信息

(2)通过params

                this.$router.push({
                    name: 'aboutA',
                    params:{
                        id: 123
                    }
                })

页面显示同（1）获取信息方法也相同
(3)通过query

          this.$router.push({
                 path: '/aboutA',
                 query:{
                     id: 12312
                 }
             })  

// 这个出来地址是/aboutA?id=12312不会有对应页面出现
(4)直接用window.open

                window.open('#/aboutA/123')

这个方法出现的效果也是一样的

注

path和query结合使用，取参也用query
name和params结合使用，取参也用params
对于目标地址路径的不同，使用也有所区别，window.open方法简单些，刷新页面丢失以及和跳转参数和目标地址设置无法对应，导致显示不出来，这几个需要稍微注意点。

$route部分对象的解释

1，$route.path

类型: string

字符串，对应当前路由的路径，总是解析为绝对路径。

2，$route.params

类型: Object
　　一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。

3，$route.query

类型: Object

一个 key/value 对象，表示 URL 查询参数。则有 $route.query

4，$route.hash

类型: string

当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。

5，$route.fullPath

类型: string

完成解析后的 URL，包含查询参数和 hash 的完整路径。p