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


Posted in Javascript onDecember 09, 2019

这篇文章主要介绍了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
    }
   });
    
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 Javascript
JavaScript 实现页面滚动动画
Apr 24 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 #Javascript
简述Vue中容易被忽视的知识点
Dec 09 #Javascript
vue路由传参三种基本方式详解
Dec 09 #Javascript
vue使用nprogress实现进度条
Dec 09 #Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 #Javascript
vue vant Area组件使用详解
Dec 09 #Javascript
JS中的模糊查询功能
Dec 08 #Javascript
You might like
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
js实现点击生成随机div
2020/01/16 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
python实现flappy bird小游戏
2018/12/24 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
Python发送邮件实现基础解析
2020/08/14 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
财务部副经理岗位职责
2014/03/14 职场文书
岗位职责说明书
2014/05/07 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
先进工作者申报材料
2014/12/23 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
Redis中一个String类型引发的惨案
2021/07/25 Redis