vue新建项目并配置标准路由过程解析

2023-08-04 20:18:03 79

这篇文章主要介绍了vue新建项目并配置标准路由过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

配置路由所有用到的地方总共四步或者说四处

1.index.js（src--router--index.js）

importVuefrom'vue'
importRouterfrom'vue-router'
//importHelloWorldfrom'@/components/HelloWorld'


importHomefrom'@/components/layout/Home'
importshowuserfrom'@/components/t_dom_owner_user/showuser'
importaddusersfromotherfrom'@/components/t_dom_owner_user/addusersfromother'

importshowresTfrom'@/components/t_dom_owner_resT/showresT'
Vue.use(Router)
exportdefaultnewRouter({
//routes:[
//{
//path:'/',
//name:'Login',
//component:Login
//}
//]

routes:[

{
path:'/',
name:'Home',
component:Home,
children:[
{
path:'/showuser',
name:'showuser',
component:showuser,
},
{
path:'/showresT',
name:'showresT',
component:showresT
}]

},

{
path:'/addusersfromother',
name:'addusersfromother',
component:addusersfromother
},

]
})

2.main.js(src根目录下)

importVuefrom'vue'
importAppfrom'./App.vue'
importElementUIfrom'element-ui';
importrouterfrom'./router'
import'element-ui/lib/theme-chalk/index.css';
import'../public/css/main.css'
importstorefrom'../store'
Vue.config.productionTip=false;
Vue.use(ElementUI);
newVue({
router,
render:h=>h(App),
store,

}).$mount('#app')

3.App.vue

注意App.vue里的必须配置，这意味着项目运行起始的路由界面，

即对应index.js里配置的根路径http://localhost:8080/#，作为app.vue的入口页面

path:'/',
name:'Home',
component:Home,

4.其它应用路由的界面

比如showowner.vue

其中的嵌入式布局el-main里配置，意味着在本界面showowner.vue触发路由将要跳转的位置，即要跳转到el-main处

然后是跳转路由写法，跳转到的界面是pathVariable，界面pathVariable就会显示在上面配置的el-main处

handleNodeClick(data){
console.log(data);
//每次点击结点都要初始化ownerId
this.domId=data.data.domId;
this.ownerId=data.data.ownerId;
this.varify();
this.$router.push({
path:this.pathVariable,
query:{
domId:this.domId,
ownerId:this.ownerId
}
});

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

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

vue新建项目并配置标准路由过程解析

热门推荐

随机推荐