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

1. router-link

• 聲明式
• prop=> :to=“…”
• 相當(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()

• 可追溯
• 編程式
• router.push(…)//該方法的參數(shù)可以是一個(gè)字符串路徑，或者一個(gè)描述地址的對(duì)象。
• 會(huì)向history棧添加新紀(jì)錄
• 方式
  • 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)

• 不可追溯
• 它不會(huì)向history添加新紀(jì)錄
• 方式
  • 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)

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

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

    const url=location.href
    

  • writeable

   location.
  

• 刷新頁(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ì)丟失。

總結(jié)

到此這篇關(guān)于Vue路由跳轉(zhuǎn)的5種方式及擴(kuò)展的文章就介紹到這了,更多相關(guān)Vue路由跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論