Vue Router路由的跳转及参数传递

官网地址： Vue Router

学习官网后做个笔记;

1. 声明式router-link

    <!-- 1.不带参数 -->
    <router-link :to="{ name:'home'}"></router-link>
    <router-link :to="{ path:'/home'}"></router-link>
    <!-- name  path 都可以指定， 推荐使用name -->

    <!-- 2.带参数 可以使用params 或 query可以传递参数 -->

    <router-link :to="{name:'home', params:{id:1}}"></router-link>

    <!-- params传参数 (类似post)
      路由配置 path: "/home/:id" 或者 path: "/home:id" 
      不配置path ,第一次可请求,刷新页面id会消失
      配置path,刷新页面id会保留-->

      <!-- html   取值 ：  {{ $route.params.id}} -->
      <!-- script 取值 ：  this.$route.params.id -->

    <router-link :to="{ path:'home', query: { id: 1}}"></router-link>
    <!-- 结果为/home?id=1 -->

    <!-- html   取值 ：  {{ $route.query.id}} -->
    <!-- script 取值 ：   this.$route.query.id -->
    

注意：params和query的区别：

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

路由配置：

1. params写法：

 {
path: '/home/：id/:1',
name: Home,
component: Home
}

`如果路由上面不写参数，也是可以传过去的，但不会在url上面显示出你的参数，并且当你跳到别的页面或者				刷新页面的时候参数会丢失，那依赖这个参数的http请求或者其他操作就会失败。`

2. query写法：

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

总结：

1. params、query不设置也可以传参，但是params不设置的时候，刷新页面或者返回参数会丢失，query并不会出现这种情况；
2. params传参时 参数不会出现在url的路径上面， 但是刷新页面时param里面的数据会消失；
3. query传参时 参数出现在url的路径上面， 刷新页面时query里面的数据不变；

故，params常用于密码之类的传参，不会显示在地址上，有利于保护隐私；

2. 编程式this.$router.push

this.$router.push在函数中调用；

// 1.不带参数
this.$router.push('/home')
this.$router.push({ name: 'home'})
this.$router.push({ path:'/home'})

// 2.query传参
this.$router.push({ name:'home',query: {id:'1'}})
this.$router.push({ path:'/home',query: {id:'1'}})

// 3.params传参
this.$router.push({name:'home',params:{id:'1'}})

// 注意，如果提供了path, params参数会被忽略,需手动在路由中配置带有完整参数的path
this.$router.push({path:'/home',params:{id:''}})  //  结果为/home

3. 编程式this.$router.replace

用法与this.$router.push的相同，但不同的是：它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

补充：若使用声明式，则在router-link中添加replace

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

4. this.$router.go()

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

this.$router.go(n)
 // 向前或者向后跳转n个页面，n可为正整数或负整数

总结：

1. this.$router.push
   跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面；

2. this.$router.replace
   跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)；

3. this.$router.go(n)
   向前或者向后跳转n个页面，n可为正整数或负整数；

4. 获取参数：
   html 取值 ： {{ $route.params.id}} 或 {{ $route.query.id}}

   script 取值 ： this.$route.params.id 或 this.$route.params.id

5. router与route的区别
   this.$route 是路由【参数对象】，所有路由中的参数， params, query 都属于它;

   this.$router是一个路由【导航对象】，用它 可以方便的 使用 JS 代码，实现路由的 前进、后退、 跳转到新的 URL 地址