vue路由中$route与$router，path与name，params与query的区别梳理

深藏阁楼爱情的钟 2022-12-31 13:20 101阅读 0赞

一、r o u t e r 和 router和router和route的区别

$router : 是路由操作对象，只写对象  
r o u t e : 路 由 信 息 对 象 ， 只 读 对 象 栗 子 ： / / route : 路由信息对象，只读对象 栗子： //route:路由信息对象，只读对象栗子：//router操作 路由跳转

this.$router.push({
          name:'hello',
          params:{
              name:'word',
              age:'11'
         }
    })

//$route读取 路由参数接收

var name = this.$route.params.name;

二、路由跳转方式name 、 path 和传参方式params 、query的区别

\*path 和 Name路由跳转方式，都可以用query传参

栗子：

//Router.js
    {
    path: '/hello',
    name: 'HelloWorld',
    component: helloPage
    }
    跳转方式name
    this.$router.push({
    name: 'HelloWorld',
    query: {
    id: 12345
    }
    })
    跳转方式path
    this.$router.push({
    path: '/hello',
    query: {
    id: 12345
    }
    })

//获取路由参数信息方式：  
\{ \{$route.query.id\}

\*path路由跳转方式,params传参会被忽略，只能用name命名的方式跳转

注意：params传参如果路由上面不写参数，也是可以传过去的，但不会在url上面显示出你的参数，并且当你跳到别的页面或者刷新页面的时候参数会丢失，要怎么解决？

解决：一、传参字符串name小的时候，可以在路由后面加参数名/router1/:name

二、name大的时候用sessionStorage；

\*注意：如果路由为动态路由\{path: ‘/hello/:id’,name:‘hello’\}  
路由跳转执行this.$router.push(\{name: ‘hello’,params: obj\});obj里面只要有id属性，就会自动带到URL里面