vue路由的使用

2021-10-03 11:16:22 字數 1671 閱讀 5595

1、配置路由檔案

在router.js中寫

import vue from 'vue'


import router from 'vue-router'


import hello from '@/components/hello'


import word from '@/components/word'


;vue.use(router)


export default new router(


,        ]}


)
*1.route：由兩部分組成，path和component. path 指路徑，component 指的是元件

*2.』 / 』 代表誰是首頁，』 /index』訪問的是index的路徑

2.路由檔案注入到main.js檔案中

import vue from 'vue'


;import router from 'vue-router';;


import router from './router/index'


;vue.config.productiontip =


false


;new vue(


})
二、路由跳轉

路由的跳轉使用標籤router-link，這裡相當於a標籤

1.to的值傳到 router.push()

//to是通過繫結資料到上面


"/">hello頁面


"word"


>word頁面


<


!-- 定義路由插座 -->
程式設計式：router.push(…)

方法一: this.$router.push(;

方法二：this.$router.push(;

2.replace

呼叫 router.replace() ,導航後不會留下 history 記錄

"" replace>
4.tag

使用tag可以使router-link轉化成你想要的標籤

"/foo" tag=


"li"


>foo


<


!-- 渲染結果 -->


foo
三、子路由



"/word/router1"


>路由1


"/word/router2"


>路由2


//路由的跳轉


,        


]}
四、路由傳參

1.查詢字串 給路由傳遞引數

"/login?id=10"


>登入
2.query傳遞引數



"}">路由

Vue路由使用

路由是以外掛程式的形式引入到我們的vue專案中來的 vue router是vue的核心外掛程式 1 建立路由物件 var router new vuerouter 2 配置路由規則 router.addroutes 路由物件 路由物件 3 將配置好的路由物件交給vue 在options中傳遞 key...

vue 路由使用

1.安裝 2.使用 3.router幾個用法 npm安裝 npm install vue router 1.繫結vue物件 2.非同步載入元件 component import views mysetting person script import vue from vue import rout...

Vue 路由使用

點選登入和註冊可以進行頁面切換 安裝vue,vue router 建立index.html login.js register.js檔案 將vue.js vue router.js login.js register.js按順序引入index.html中 編寫login.js和register.js...