Vue路由跳轉(zhuǎn)的五種方式

路由跳轉(zhuǎn)有兩種形式：聲明式導(dǎo)航、編程式導(dǎo)航

1. router-link

1. 聲明式
2. prop=> :to=“…”
3. 相當(dāng)與 router.push(…)

router-link中鏈接如果是’ / '開(kāi)始，就是從根路由開(kāi)始
如果開(kāi)始不帶 ’ / '，則是從當(dāng)前路由開(kāi)始
例子

<template>
  <div>
    router-link 第一種方式
    <router-link :to="{name:'home'}">  
    <router-link :to="{path:'/home'}"> 
    name,path都行, 建議用name 
     <router-link :to"{
              name:'page1',
              query:{key:'我是傳遞的參數(shù)'}
    }">
    傳遞參數(shù)
    </router-link>
  </div>
</template>

2. this.$router.push()

1. 可追溯
2. 編程式
3. router.push(…)//該方法的參數(shù)可以是一個(gè)字符串路徑，或者一個(gè)描述地址的對(duì)象。
4. 會(huì)向history棧添加新紀(jì)錄
5. 方式
   • name
     • route-name
     • params

     //params傳參
     1.路由配置：
      name: 'home',
      path: '/home/:id'(或者path: '/home:id')
      2.跳轉(zhuǎn)：
      this.$router.push({name:'home',params: {id:'1'}})
      注意：
      // 只能用 name匹配路由不能用path
      // params傳參數(shù)(類似post)  路由配置 path: "/home/:id" 或者 path: "/home:id"否則刷新參數(shù)消失
     

   • path
     • router-path
     • query

     //不帶參數(shù)
      this.$router.push('/home')
      this.$router.push({name:'home'})
      this.$router.push({path:'/home'})
     //query傳參
     1.路由配置：
      name: 'home',
      path: '/home'
      2.跳轉(zhuǎn)：
      this.$router.push({name:'home',query: {id:'1'}})
      this.$router.push({path:'/home',query: {id:'1'}})
      3.獲取參數(shù)
      html取參: $route.query.id
      script取參: this.$route.query.id
     

     //直接通過(guò)path傳參
     1.路由配置：
     name: 'home',
     path: '/home/:id'
     2.跳轉(zhuǎn)：
     this.$router.push({path:'/home/123'}) 
     或者：
     this.$router.push('/home/123') 
     3.獲取參數(shù)：
     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:'我是傳遞的參數(shù)'}
      })
      //push第二種路由跳轉(zhuǎn)方法
    }
  }
  
}

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

1. 不可追溯
2. 它不會(huì)向history添加新紀(jì)錄
3. 方式
   • 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:'我是傳遞的參數(shù)'}
      })
      //replace第三種路由跳轉(zhuǎn)方法
    }
  }
  
}

4. this.$router.go(n)

1. 相當(dāng)于當(dāng)前頁(yè)面向前或向后跳轉(zhuǎn)多少個(gè)頁(yè)面，類似window.history.go(n)m可以為正數(shù)可為負(fù)數(shù)
2. $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第四種路由跳轉(zhuǎn)方法
    }
  }
  
}

5. location

1. Location對(duì)象包含有關(guān)當(dāng)前URL的信息
2. href
   • 設(shè)置或返回完整的URL。
   • readable可讀

     const url=location.href
     

   • writeable

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

3. 刷新頁(yè)面

可以用 window.location來(lái)訪問(wèn)

擴(kuò)展

this.$ router.push()和 this.$ router.replace()的區(qū)別

this.$router.push()跳轉(zhuǎn)到指定url路徑，并向history棧中添加一個(gè)記錄，點(diǎn)擊后退會(huì)返回上一個(gè)頁(yè)面

this.$ router.replace()跳轉(zhuǎn)到指定url路徑，但是history棧中不會(huì)有記錄，所以點(diǎn)擊返回按鈕時(shí)，會(huì)直接用【上一個(gè)頁(yè)面之前的那個(gè)頁(yè)面】來(lái)替換當(dāng)前的頁(yè)面

params和query的區(qū)別

query類似 get，跳轉(zhuǎn)之后頁(yè)面 url后面會(huì)拼接參數(shù)，類似?id=1。
非重要性的可以這樣傳，密碼之類還是用params，刷新頁(yè)面id還在。
params類似 post，跳轉(zhuǎn)之后頁(yè)面 url后面不會(huì)拼接參數(shù)。
總結(jié)：
1.query可以用name和path匹配路由，通過(guò)this.$route.query.id獲取參數(shù)，刷新瀏覽器參數(shù)不會(huì)丟失
2.params只能用name匹配路由，通過(guò)path匹配路由獲取不到參數(shù)，對(duì)應(yīng)的路由配置path:‘/home/:id’或者path:‘home:id’，否則刷新瀏覽器參數(shù)丟失
3.直接通過(guò)url傳參，push({path: ‘/home/123’})或者push(’/home/123’)，對(duì)應(yīng)的路由配置path:‘/home/:id’，刷新瀏覽器參數(shù)不會(huì)丟失。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-743540.html

到了這里，關(guān)于Vue路由跳轉(zhuǎn)的五種方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！