import Vue from 'vue' import Router from 'vue-router' // 前2個導入時vue框架自帶的 import SayHi from '@/components/SayHi' // 這個導入是自己寫的位于components下的sayHiVue.use(Router) // 用到了vue的Router模塊 export default new Router({routes: [{path: '/say_hi', // 在瀏覽器中輸入@/#/say_hiname: 'SayHi', // 給處理這條路由的js文件起名為SayHi,一般就是瀏覽器中輸入的駝峰命名法命名的component: SayHi // 處理該路由的組件,在上面導入的},] }) path: 定義鏈接地址, 如/#/say_hi name: 表示為這個路由加名字, 方便以后引用, 如this.$route.push({name:'SayHi'}) component: 表示該路由由哪個component來處理. // 跳轉到某個路由時帶上參數 --- > 普通的參數 routes: [{path: '/blog',name: 'Blog'} ] // 在視圖中,我們這樣做: <router-link :to="{name: 'Blog', query:{id:3} }">User</router-link> // 用戶點擊這個代碼生成的 html 頁面時, 就會觸發跳轉.// 在<script />中,我們這樣做: this.$router.push({name: 'Blog', query: {id: 3}})// 上面兩個都會跳到/#/blog?id=3 // 跳到某個路由時帶上參數 --- > 在路由中聲明的參數 routes: [{path: '/blog/:id',name: 'Blog'}, ]// 在視圖中,我們這樣做: <router-link :to="{name: 'Blog', params: {id: 3} }">User</router-link>// 在script中,我們這樣做: this.$router.push({name: 'Blog', params: {id: 3}}) // 上面兩個都會跳轉到/#/blog/3 ps:與上面塊(/#/blog?id=3)的區別 // 根據路由獲取參數 --- > 對于 /#/blogs?id=3 中的參數,可以這樣獲取 this.$route.query.id // 返回結果3--- > 對于 /#/blogs/3 這樣的參數,可以對應的路由是: routes: [{path: '/blog/:id', // 注意此處的id...} ] 可以采取以下的代碼來獲取id this.$route.params.id // 返回結果3

參考 《Vue.js快速入門》 P92~P94

總結

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

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