1 vue router跳轉用法詳解

2021-09-23 23:58:18 字數 2212 閱讀 3382

①首先要安裝vue-router，利用npm進行安裝

npm install vue-router或者cnpm install vue-router
顯示url的內容，也可寫成

user

導航②在component資料夾新建about.vue  home.vue檔案，按照預設模版

③在router資料夾下新建乙個router.js檔案，進行配置

引入vue和vue-router，切記要加上vue.use(vuerouter)

import vue from 'vue'


import vuerouter from 'vue-router'
引入你新建的about.vue  home.vue檔案，配置路由，指定路由和元件之間的關係

const routes = [,,]
定義router，完整的router.js**

import vue from 'vue'


import vuerouter from 'vue-router'


import home from './components/home.vue'


import about from './components/about.vue'


import phone from './components/home/phone.vue'


import computer from './components/home/computer'


const user = 


// const phone = 


// const computer = 


vue.use(vuerouter)


const routes = [,]},


,]var router = new vuerouter()


export default router
重點或者易錯點：export default router這句話要記得加上，不然會報下面的警告

④配置main.js，詳細見下面**

import vue from 'vue'


// 引入路由


import router from './router'


// 引入echarts


vue.config.productiontip = false


new vue()
在1的基礎，進行子路由的跳轉，

①在home資料夾下新建兩個vue檔案，作為子路由所要展示的內容

②在router中配置子路由，在上一節點的內容加上子路由，利用chilren特性

③在父頁面寫上

user 

以顯示子頁面的內容

具體效果：

①通過路由傳參

為每乙個路由命名，然後取得路由的名字

②通過繫結to引數的傳遞

命名路由傳遞引數需要使用params來傳遞，這裡一定要注意使用params不是query。目標頁面接收傳遞引數時使用params

特別注意：命名路由這種方式傳遞的引數，如果在目標頁面重新整理是會出錯的,同時這個引數是虛擬的，而非真實的，也就是說當你再次重新整理的時候，頁面上是獲取不到值的

vue router頁面跳轉

vue router的教程位址 我們在建立專案的時候命令列如下 vue init webpack my project cd my project npm install npm run dev最新的專案已經自動安裝了vue router 下面介紹步驟 class tab class tab ite...

vue router頁面跳轉

顯示字段 router link to 導航路徑 使用示例如下 導航 首頁 router link hello hello router link p 實際專案中，很多時候都是通過在js 內部進行導航的跳轉，使用方式如下 this router.push 具體的簡單用法 1 先編寫乙個按鈕，在按鈕上...

vue router跳轉方法

1.this.router.push 用法 2.this.router.replace 3.this.router.go n 相對於當前頁面向前或向後跳轉多少個頁面,類似window.history.go n n可為正數可為負數。正數返回上乙個頁面 vue router 2.0 常用基礎知識點之ro...