vue 实现把路由单独分离出来

2023-07-18 21:10:03 78

建立一个router.js文件

引入

importVuefrom'vue'
importVueRouterfrom'vue-router'

importHomefrom'../components/home/home.vue'

然后注册

Vue.use(VueRouter);
constrouter=newVueRouter({
mode:'history',
base:__dirname,
routes:[
{
path:historyUrl+'/',
component:Home,
name:'主页'
},
]}

最后暴露出云

exportdefaultrouter

在main.js里面直接引入然后就可以用了

importrouterfrom'./main/router.js'
constapp=newVue({
router:router,
watch:{
'$route'(to,from,next){
//console.log(to)//路由监听
//console.log(from)
}
},
render:h=>h(App)
}).$mount('#app');

别的js文件如果要调用router方法，直接像main.js一样引入直接用就可以了

补充知识：vue.cli3设置单独路由页面全屏切换

不是全屏的时候

是全屏的时候

首先思想：获取当前路由页面的节点，对的节点操作定位，脱离文档流，top：0,；left：0；

1.用ref获取当前路由页面最大的div，也就是template包的第一个div，也可以是其他的

2.如果要把节点从父组件传到子组件的话，在data里面定义一个值，然后在mounted赋值，在传给子组件(如果没有子组件直接跳过2，直接看3)

父组件

3.然后在切换全屏的按钮上绑定@click事件，在点击当时操作节点，在data里面设置一个screen值为1，为了来回切换

//点击切换全屏
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实现把路由单独分离出来就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue 实现把路由单独分离出来

热门推荐

随机推荐