vue的路由跳轉

準備工作

/router/index.js

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

1.通過在$router更改

? vue路由路徑可以通過Vue中的router對象來進行更改路由路徑，在new Vue()時我們會傳入一個router對象，通過這個router對象我們就可以進行路由的更改和切換。

? 使用router.push和router.replace其實這個內部是調用了history.pushState()方法和history.replaceState()，也可以通過router.go和router.back來控制路徑的回退。

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

2.在router-link中指定跳轉路徑

可以通過router-link的to屬性指定跳轉路徑。

先編寫路由

const routes = [{ path:'',//重定向將''->'/home'redirect:'/home'},{ path:'/home',component:Home} ]

調用

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

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

3.動態路由

vue里面有動態路由，允許用戶動態更改路由信息。通過（：routename）來標識路由的動態地址

先配置路由

在配置路由時，如果使用動態路由那么就需要使用（：）號來表示動態路徑。

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

調用

配置好動態路由，那么我們就可以對路由進行動態的路徑拼接啦。我們通過v-bind來捆綁to屬性，然后進行字符串拼接。userID對應到上面路由配置的地方。

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

獲取處于活動狀態的route信息

在component/User.vue中，通過$route獲取處于活動狀態的route

this.$route.params.ID 與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的vue的跳转路由的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。