Vue路由跳转的5种方式及扩展

路由跳转有两种形式：声明式导航、编程式导航

1. router-link

• 声明式
• prop=> :to=“…”
• 相当与 router.push(…)

router-link中链接如果是’ / '开始，就是从根路由开始

如果开始不带 ’ / '，则是从当前路由开始

例子

<template>
  <div>
    router-link 第一种方式
    <router-link :to="{name:'home'}">  
    <router-link :to="{path:'/home'}"> 
    name,path都行, 建议用name 
     <router-link :to"{
              name:'page1',
              query:{key:'我是传递的参数'}
    }">
    传递参数
    </router-link>
  </div>
</template>

2. this.$router.push()

• 可追溯
• 编程式
• router.push(…)//该方法的参数可以是一个字符串路径，或者一个描述地址的对象。
• 会向history栈添加新纪录
• 方式
  • name
    • route-name
    • params

    //params传参
    1.路由配置：
     name: 'home',
     path: '/home/:id'(或者path: '/home:id')
     2.跳转：
     this.$router.push({name:'home',params: {id:'1'}})
     注意：
     // 只能用 name匹配路由不能用path
     // params传参数(类似post)  路由配置 path: "/home/:id" 或者 path: "/home:id"否则刷新参数消失
    

  • path
    • router-path
    • query

    //不带参数
     this.$router.push('/home')
     this.$router.push({name:'home'})
     this.$router.push({path:'/home'})
    //query传参
    1.路由配置：
     name: 'home',
     path: '/home'
     2.跳转：
     this.$router.push({name:'home',query: {id:'1'}})
     this.$router.push({path:'/home',query: {id:'1'}})
     3.获取参数
     html取参: $route.query.id
     script取参: this.$route.query.id
    

    //直接通过path传参
    1.路由配置：
    name: 'home',
    path: '/home/:id'
    2.跳转：
    this.$router.push({path:'/home/123'}) 
    或者：
    this.$router.push('/home/123') 
    3.获取参数：
    this.$route.params.id
    

例子

<template>
  <div>
    <vant-button @click='gotoFn1' type="defaullt">
      push第二种方式
    <van-button>
  </div>
</template>

export default{
  name:'page',
  data(){
  },
  methods:{
   gotoFn1(){
      this.$router.push({
        path:'/page',
        query:{key:'我是传递的参数'}
      })
      //push第二种路由跳转方法
    }
  }
}

3. this.$router.replace() (用法同push)

• 不可追溯
• 它不会向history添加新纪录
• 方式
  • name
    • route-name
    • params
      • 例如

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

      • 解释

      params:/router1/:site/:bu
      //这里的site、bu叫做params
      

  • path
    • router-path
    • query
      • 例如

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

      -解释

      query:/router1?id=123
      这里的id叫做query
      

例子

<template>
  <div>
    <vant-button @click='gotoFn2' type="defaullt">
      replace第三种方式
    <van-button>
  </div>
</template>

export default{
  name:'page',
  data(){
  },
  methods:{
   gotoFn1(){
      this.$router.replace({
        path:'/page',
        query:{key:'我是传递的参数'}
      })
      //replace第三种路由跳转方法
    }
  }
}

4. this.$router.go(n)

• 相当于当前页面向前或向后跳转多少个页面，类似window.history.go(n)m可以为正数可为负数
• $router.go(-1)

例子

<template>
  <div>
    <vant-button @click='goBack' type="defaullt">
      第四种方式
    <van-button>
  </div>
</template>

export default{
  name:'page',
  data(){
  },
  methods:{
   goBack(){
      this.$router.go(-1)
       //go第四种路由跳转方法
    }
  }
}

5. location

• Location对象包含有关当前URL的信息
• href
  • 设置或返回完整的URL。
  • readable可读

    const url=location.href
    

  • writeable

   location.href='https://www.baidu.com'
  

• 刷新页面

可以用 window.location来访问

扩展

this.$ router.push()和 this.$ router.replace()的区别

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

this.$ router.replace()跳转到指定url路径，但是history栈中不会有记录，所以点击返回按钮时，会直接用【上一个页面之前的那个页面】来替换当前的页面

params和query的区别

query类似 get，跳转之后页面 url后面会拼接参数，类似?id=1。

非重要性的可以这样传，密码之类还是用params，刷新页面id还在。

params类似 post，跳转之后页面 url后面不会拼接参数。

总结：1.query可以用name和path匹配路由，通过this.$route.query.id获取参数，刷新浏览器参数不会丢失

2.params只能用name匹配路由，通过path匹配路由获取不到参数，对应的路由配置path:‘/home/:id’或者path:‘home:id’，否则刷新浏览器参数丢失

3.直接通过url传参，push({path: ‘/home/123’})或者push(’/home/123’)，对应的路由配置path:‘/home/:id’，刷新浏览器参数不会丢失。

总结

到此这篇关于Vue路由跳转的5种方式及扩展的文章就介绍到这了,更多相关Vue路由跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！