路由跳轉有兩種形式：聲明式導航、編程式導航

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:'我是傳遞的參數(shù)'}
    }">
    傳遞參數(shù)
    </router-link>
  </div>
</template>

2. this.$router.push()

• 可追溯
• 編程式
• router.push(…)//該方法的參數(shù)可以是一個字符串路徑，或者一個描述地址的對象。
• 會向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傳參數(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.跳轉：
     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
    

    //直接通過path傳參
    1.路由配置：
    name: 'home',
    path: '/home/:id'
    2.跳轉：
    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第二種路由跳轉方法
    }
  }
}

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:'我是傳遞的參數(shù)'}
      })
      //replace第三種路由跳轉方法
    }
  }
}

4. this.$router.go(n)

• 相當于當前頁面向前或向后跳轉多少個頁面，類似window.history.go(n)m可以為正數(shù)可為負數(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第四種路由跳轉方法
    }
  }
}

5. location

• Location對象包含有關當前URL的信息
• href
  • 設置或返回完整的URL。
  • readable可讀

    const url=location.href
    

  • writeable

   location.
  

• 刷新頁面

可以用 window.location來訪問

擴展

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

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

this.$ router.replace()跳轉到指定url路徑，但是history棧中不會有記錄，所以點擊返回按鈕時，會直接用【上一個頁面之前的那個頁面】來替換當前的頁面

params和query的區(qū)別

query類似 get，跳轉之后頁面 url后面會拼接參數(shù)，類似?id=1。

非重要性的可以這樣傳，密碼之類還是用params，刷新頁面id還在。

params類似 post，跳轉之后頁面 url后面不會拼接參數(shù)。

總結：1.query可以用name和path匹配路由，通過this.$route.query.id獲取參數(shù)，刷新瀏覽器參數(shù)不會丟失

2.params只能用name匹配路由，通過path匹配路由獲取不到參數(shù)，對應的路由配置path:‘/home/:id’或者path:‘home:id’，否則刷新瀏覽器參數(shù)丟失

3.直接通過url傳參，push({path: ‘/home/123’})或者push(’/home/123’)，對應的路由配置path:‘/home/:id’，刷新瀏覽器參數(shù)不會丟失。

總結

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

最新評論