铁雪资源网 Design By www.gsvan.com
这篇文章主要介绍了vue新建项目并配置标准路由过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
配置路由所有用到的地方总共四步或者说四处
1.index.js（src--router--index.js）
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/layout/Home'
import showuser from '@/components/t_dom_owner_user/showuser'
import addusersfromother from '@/components/t_dom_owner_user/addusersfromother'
import showresT from '@/components/t_dom_owner_resT/showresT'
Vue.use(Router)
export default new Router({
// 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根目录下)
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import router from './router'
import 'element-ui/lib/theme-chalk/index.css';
import '../public/css/main.css'
import store from '../store'
Vue.config.productionTip = false;
Vue.use(ElementUI);
new Vue({
router,
render: h => h(App),
store,
}).$mount('#app')
3.App.vue
<template> <div id="app"> <!--<img alt="Vue logo" src="/UploadFiles/2021-04-02/logo.png">注意App.vue里的<router-view></router-view>必须配置，这意味着项目运行起始的路由界面，
即对应index.js里配置的根路径http://localhost:8080/#，作为app.vue的入口页面
path: '/', name: 'Home', component: Home ,4.其它应用路由的界面
比如showowner.vue
<template> <div> <!-- <el-tree :data="data" @node-click="handleNodeClick"></el-tree> --> <el-container> <el-aside width="200px"> <el-tree :data="data" node-key="id" :props="defaultProps" :expand-on-click-node="false" :highlight-current="true" @node-click="handleNodeClick" > <span class="custom-tree-node" slot-scope="{ node, data }"> <span>{{ data.data.ownerName}}</span> <span> <el-button type="text" size="mini"> <i class="el-icon-edit"></i> </el-button> <el-button type="text" size="mini"> <i class="el-icon-plus"></i> </el-button> <el-button type="text" size="mini"> <i class="el-icon-delete"></i> </el-button> </span> </span> </el-tree> </el-aside> <el-main> <el-col :span="24" class="content-wrapper"> <transition name="fade" mode="out-in"> <router-view></router-view> </transition> </el-col> </el-main> </el-container> </div> </template>其中的嵌入式布局el-main里配置<router-view></router-view>，意味着在本界面showowner.vue触发路由将要跳转的位置，即要跳转到el-main处
<el-main> <el-col :span="24" class="content-wrapper"> <transition name="fade" mode="out-in"> <router-view></router-view> </transition> </el-col> </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 } }); }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
vue,项目,配置,标准,路由
铁雪资源网 Design By www.gsvan.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无vue新建项目并配置标准路由过程解析的评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。