vue新建项目并配置标准路由过程解析
程序员文章站
2022-03-20 18:53:51
这篇文章主要介绍了vue新建项目并配置标准路由过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
配置路由所有用到的地方总共四...
这篇文章主要介绍了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="./assets/logo.png">--> <!--<helloworld msg="welcome to your vue.js app"/>--> <!--<home></home>--> <router-view></router-view> </div> </template> <script> // import helloworld from './components/helloworld.vue' //import home from "./components/layout/home"; export default { name: "app", components: { // helloworld //home }, }; </script> <style> #app { width: 100%; height: 100%; } </style>
注意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 } }); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。