vue的路由跳轉(zhuǎn)

準(zhǔn)備工作

/router/index.js

import VueRouter from 'Vue-router' import Vue from 'vue' Vue.use(VueRouter) const routes = [] //route對(duì)象（填寫(xiě)路由） const router = new VueRouter({routes}) export default router;

1.通過(guò)在$router更改

? vue路由路徑可以通過(guò)Vue中的router對(duì)象來(lái)進(jìn)行更改路由路徑，在new Vue()時(shí)我們會(huì)傳入一個(gè)router對(duì)象，通過(guò)這個(gè)router對(duì)象我們就可以進(jìn)行路由的更改和切換。

? 使用router.push和router.replace其實(shí)這個(gè)內(nèi)部是調(diào)用了history.pushState()方法和history.replaceState()，也可以通過(guò)router.go和router.back來(lái)控制路徑的回退。

//通過(guò)push進(jìn)行路徑的壓棧，通過(guò)改方法添加的路徑可以在browser中通過(guò)后退鍵放回 //這里的$router對(duì)象是對(duì)應(yīng)上面new VueRouter({routes}) //在App.vue中用this.$router可以獲得注冊(cè)的router對(duì)象this.$router.push('/home') //通過(guò)replace修改路由路徑，是直接的更改 this.$router.replace('/home') //通過(guò)go進(jìn)行路徑的回退（回到上一個(gè)瀏覽頁(yè)面） this.$router.go(-1) //back可以完成一樣的效果 this.$router.back() //通過(guò)go進(jìn)行路徑的前進(jìn)（回到下一個(gè)瀏覽頁(yè)面） this.$router.go(1)

2.在router-link中指定跳轉(zhuǎn)路徑

可以通過(guò)router-link的to屬性指定跳轉(zhuǎn)路徑。

先編寫(xiě)路由

const routes = [{ path:'',//重定向?qū)?#39;'->'/home'redirect:'/home'},{ path:'/home',component:Home} ]

調(diào)用

<!--這個(gè)跟router.push('/home')一樣--> <router-link to="/home">首頁(yè)</router-link><!--如果想使用replace--> <router-link to="/home" replace>首頁(yè)</router-link><!--渲染位置--> <router-view></router-view>

關(guān)于其他vue router的其他更改屬性，可以查閱官方文檔：https://router.vuejs.org/zh/api/#router-link

3.動(dòng)態(tài)路由

vue里面有動(dòng)態(tài)路由，允許用戶動(dòng)態(tài)更改路由信息。通過(guò)（：routename）來(lái)標(biāo)識(shí)路由的動(dòng)態(tài)地址

先配置路由

在配置路由時(shí)，如果使用動(dòng)態(tài)路由那么就需要使用（：）號(hào)來(lái)表示動(dòng)態(tài)路徑。

import User from '../component/User' import VueRouter from 'Vue-router' const routes =[{ //:ID是動(dòng)態(tài)的path:'/user/:ID',component:user} ]const router =new VueRouter({routes,mode:'history' })

調(diào)用

配置好動(dòng)態(tài)路由，那么我們就可以對(duì)路由進(jìn)行動(dòng)態(tài)的路徑拼接啦。我們通過(guò)v-bind來(lái)捆綁to屬性，然后進(jìn)行字符串拼接。userID對(duì)應(yīng)到上面路由配置的地方。

<!--'/user'和userID（獲取的ID）進(jìn)行拼接--> <router-link :to="'/user'+userID">我的</router-link>

獲取處于活動(dòng)狀態(tài)的route信息

在component/User.vue中，通過(guò)$route獲取處于活動(dòng)狀態(tài)的route

this.$route.params.ID 與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的vue的跳转路由的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。