建立一個 router.js 文件
引入
|
1
2
3
4
|
import vue from 'vue'import vuerouter from 'vue-router' import home from '../components/home/home.vue' |
然后注冊
|
1
2
3
4
5
6
7
8
9
10
11
|
vue.use(vuerouter);const router = new vuerouter({ mode : 'history', base: __dirname, routes: [ { path: historyurl + '/', component: home, name : '主頁' },]} |
最后暴露出云
export default router
在main.js 里面直接引入然后就可以用了
|
1
2
3
4
5
6
7
8
9
10
11
|
import router from './main/router.js'const app = new vue({ router : router, watch : { '$route' (to,from,next){ //console.log(to) //路由監(jiān)聽 //console.log(from) } }, render : h => h(app)}).$mount('#app'); |
別的 js 文件如果要調(diào)用 router 方法，直接像 main.js 一樣引入直接用就可以了
補(bǔ)充知識：vue.cli3設(shè)置單獨(dú)路由頁面全屏切換
不是全屏的時候
是全屏的時候
首先思想：獲取當(dāng)前路由頁面的節(jié)點(diǎn)，對的節(jié)點(diǎn)操作定位，脫離文檔流，top：0,；left：0；
1.用ref獲取當(dāng)前路由頁面最大的div，也就是template包的第一個div，也可以是其他的
|
1
2
3
4
5
|
<template> <div ref="index"> //ref標(biāo)識 <title :refdome='refdome'></title> </div></template> |
2.如果要把節(jié)點(diǎn)從父組件傳到子組件的話，在data里面定義一個值，然后在mounted賦值，在傳給子組件(如果沒有子組件直接跳過2，直接看3)
父組件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<template> <div ref="index"> <title :refdome='refdome'></title> //這里把data的值轉(zhuǎn)給子組件title </div></template><script>import title from '../components/title'export default { components:{ title }, data(){ return{ refdome:null } }, mounted(){ this.refdome = this.$refs.index //在這里給data賦值，記得要在mounted賦值 }} |
子組件props接收值
|
1
2
3
4
5
|
<script>export default { props: ['refdome'],}</script> |
3.然后在切換全屏的按鈕上綁定@click事件，在點(diǎn)擊當(dāng)時操作節(jié)點(diǎn)，在data里面設(shè)置一個screen值為1，為了來回切換
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// 點(diǎn)擊切換全屏 handlefullscreen() { if (this.screen % 2 == 0) { this.refdome.style.position = 'static' this.screen++ } else { this.refdome.style.width = '100%' this.refdome.style.height = '100%' this.refdome.style.position = 'absolute' this.refdome.style.top = '0' this.refdome.style.left = '0' this.refdome.style.zindex = '10' this.refdome.style.background = '#fff' this.screen++ } }, |
以上這篇vue 實(shí)現(xiàn)把路由單獨(dú)分離出來就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/qq_25186543/article/details/80008671
