关于vue.js:VUE的两种跳转push和replace对比区别

router.push(location)

在 vue.js 中想要跳转到不同的 URL，须要应用 router.push 办法。

这个办法会向 history 栈增加一个新的记录，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击

<router-link> 

时，这个办法会在外部调用，所以说，点击

<router-link :to="..."> 

等同于调用

router.push(...) 

申明式 ：

<router-link :to="..."> 

编程式 ：router.push(…)// 该办法的参数能够是一个字符串门路，或者一个形容地址的对象。

// 字符串
router.push('home')
// 对象
this.$router.push({path: '/login?url=' + this.$route.path});
// 带查问参数，变成 /backend/order?selected=2
this.$router.push({path: '/backend/order', query: {selected: "2"}});
// 命名的路由
router.push({name: 'user', params: { userId: 123}}) 

router.replace(location)

设置 replace 属性（默认值: false）的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。即便点击返回按钮也不会回到这个页面。

加上 replace: true 后，它不会向 history 增加新记录，而是跟它的办法名一样 —— 替换掉以后的 history 记录。

// 申明式：<router-link :to="..." replace></router-link>
// 编程式:
router.replace(...)
//push 办法也能够传 replace
this.$router.push({path: '/home', replace: true})

传参两种形式

应用 query:

this.$router.push({
 path: '/home',
 query: {site: [],
 bu: []}
}) 

应用 params:

this.$router.push({
  name: 'Home',  // 路由的名称
  params: {site: [],
    bu: []}
}) 

params：/router1/:id，/router1/123，/router1/789 , 这里的 id 叫做 params

query：/router1?id=123 ,/router1?id=456 , 这里的 id 叫做 query。

两者都能够传递参数，区别是什么？

1. query 传参配置的是 path，而 params 传参配置的是 name，在 params 中配置 path 有效
2. query 在路由配置不须要设置参数，而 params 必须设置
3. query 传递的参数会显示在地址栏中
4. params 传参刷新会有效，然而 query 会保留传递过去的值，刷新不变 ;

5. 路由配置：

query 的写法

{
path: '/home',
name: Home,
component: Home
} 

params 写法：

{
path: '/home/：site/:bu',
name: Home,
component: Home
}

如果路由下面不写参数，也是能够传过来的，但不会在 url 下面显示出你的参数，并且当你跳到别的页面或者刷新页面的时候参数会失落，那依赖这个参数的 http 申请或者其余操作就会失败

6, 获取路由参数

在接管的跳转的页面

created () {
let self = this
self.getParams()},
watch () {'$route': 'getParams'},
methods: {getParams () {
  let site = this.$route.query.site
  let bu = this.$route.query.bu
  // 如果是 params 传参，那就是 this.$route.params.site
  下面就能够获取到传递的参数了
 }
}

留神：获取路由下面的参数，用的是 $route，前面没有 r

params 是路由的一部分, 必须要有。query 是拼接在 url 前面的参数，没有也没关系。

params 一旦设置在路由，params 就是路由的一部分，如果这个路由有 params 传参，然而在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。

params、query 不设置也能够传参，然而 params 不设置的时候，刷新页面或者返回参数会失落，query 并不会呈现这种状况，这一点的在下面说过了

最初总结：

路由传递参数和传统传递参数是一样的，命名路由相似表单提交而查问就是 url 传递，在 vue 我的项目中基本上把握了这两种传递参数就能应酬大部分利用了，最初总结为以下：

1. 命名路由搭配 params，刷新页面参数会失落

2. 查问参数搭配 query，刷新页面数据不会失落

3. 承受参数应用 this.$router 前面就是搭配路由的名称就能获取到参数的值