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 读取xml,写入xml 实现代码
Jul 10 Javascript
jquery退出each循环的写法
Feb 26 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
JS+HTML5实现图片在线预览功能
Jul 22 Javascript
js实现图片放大展示效果
Aug 30 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
openlayers实现图标拖动获取坐标
Sep 25 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
php adodb介绍
2009/03/19 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
2020/12/15 PHP
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
python实现的防DDoS脚本
2011/02/08 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
Python安装selenium包详细过程
2019/07/23 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
高中生期末评语大全
2014/01/28 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
护士求职自荐信范文
2015/03/04 职场文书
庆七一晚会主持词
2015/06/30 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
学习党章心得体会2016
2016/01/15 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书