vue新建项目之标准路由配置

Posted 2020-11-24 yanl55555

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

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
        }
      });
       
    }