深入理解vue2.0路由如何配置问题


Posted in Javascript onJuly 18, 2017

这两天学习了Vue.js 感觉路由这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。

项目基本手脚架搭建完毕后,建一个router文件夹,里面配置一个index.js文件。

文件内容:

npm install vue-router vue-resource --save-dev(安装 vue 路由模块vue-router和网络请求模块vue-resource)

import Vue from 'vue' 
import Router from 'vue-router' (----引入路由---注释说明) 
import About from '@/components/about'(--这些需要引入的是components文件夹下面创建的一些模板---相对路径----about代表about.vue模块) 
import Home from '@/components/home' 
import Brand from '@/components/brand' 
import Company from '@/components/company' 
import Connect from '@/components/connect' 
import Main from '@/components/main' 
import Join from '@/components/join' 
import News from '@/components/news' 
import Products from '@/components/products' 
import son1 from '@/components/son1' 
import son2 from '@/components/son2' 
import list from '@/components/list' 
import newList from '@/components/newList' 
import culture from '@/components/culture' 
import certification from '@/components/certification' 
import zhuanjia from '@/components/zhuanjia' 
Vue.use(Router) (--使用---) 
 
export default new Router({ 
 routes: [ 
  { 
   path: '/main', 
   name: 'main', 
   component: Main 
  },-------------------------------- 
  { path: '/',           这里是路由重定向,比如页面加载时候进入首页 
   redirect: '/main'          (比如给路由一个选中后的样式为红色 那么这里就能用到了---.router-link-active{样式}) 
  },--------------------------------- 
  {---------------------这里是配置子路由 
   path: '/brand', 
   name: 'brand', 
   component: Brand, 
   children: [ 
    { 
     path: '/', 
     name: 'newList', 
     component: newList 
    }, 
    { 
     path: '/brand/culture', 
     name: 'culture', 
     component: culture 
    }, 
    { 
     path: '/brand/certification', 
     name: 'certification', 
     component: certification 
    }, 
    { 
     path: '/brand/zhuanjia', 
     name: 'zhuanjia', 
     component: zhuanjia 
    } 
   ] 
  }, 
  { 
   path: '/about', 
   name: 'about', 
   component: About 
  }, 
  { 
   path: '/company', 
   name: 'company', 
   component: Company 
  }, 
  { 
   path: '/connect', 
   name: 'connect', 
   component: Connect 
  }, 
  { 
   path: '/home', 
   name: 'home', 
   component: Home 
  }, 
  { 
   path: '/join', 
   name: 'join', 
   component: Join, 
   children: [ 
    { 
     path: '/', 
     name: 'son1', 
     component: son1 
    }, 
    { 
     path: '/join/son2', 
     name: 'son2', 
     component: son2 
    } 
   ] 
  }, 
  { 
   path: '/list', 
   name: 'list', 
   component: list 
  }, 
  { 
   path: '/news', 
   name: 'news', 
   component: News 
  }, 
  { 
   path: '/products', 
   name: 'products', 
   component: Products 
  } 
 ] 
})

接下来就是在每一个模块文件中加入这样的一句话暴露出去:

<script> 
export default { 
 name: 'about' ---自定义模块名字 
} 
</script>

在app中我们可以这样写:

<template> 
 <div id="app1" class="pagebox"> 
    <div style="clear:both;"></div> 
    <ul class="index-tap"> 
      <li><router-link to="/main">首页<p></p></router-link></li> 
      <li><router-link to="/about">关于我们<p></p></router-link></li> 
      <li><router-link to="/products">产品专区<p></p></router-link></li> 
      <li><router-link to="/news">新闻资讯<p></p></router-link></li> 
    </ul> 
    <ul class="index-tap"> 
      <li><router-link to="/company">企业风采<p></p></router-link></li> 
      <li><router-link to="/join">招商加盟<p></p></router-link></li> 
      <li><router-link to="/connect">联系我们<p></p></router-link></li> 
      <li><router-link to="/brand">品牌介绍<p></p></router-link></li> 
    </ul> 
    <div style="clear:both;"></div> 
    <router-view transition transition-mode="out-in"></router-view> 
    <div style="clear:both;"></div> 
    <ul class="index-footer clearx"> 
      <li v-on:click="showph = !showph">电话</li> 
      <li v-on:click="showmap = !showmap">地图</li> 
      <li v-on:click="showd = !showd">分享</li> 
      <!-- JiaThis Button BEGIN --> 
      <transition name="slide-fade"> 
      <div class="jiathis_style_32x32 share" v-show="showd"> 
        <a class="jiathis_button_qzone"></a> 
        <a class="jiathis_button_tsina"></a> 
        <a class="jiathis_button_tqq"></a> 
        <a class="jiathis_button_weixin"></a> 
        <a class="jiathis_button_renren"></a> 
      </div> 
      </transition> 
      <!-- JiaThis Button END --> 
      <transition name="slide-fade"> 
      <div class="share sharephone" v-show="showph"> 
        18305452462 
      </div> 
      </transition> 
      <transition name="slide-fade"> 
      <div class="share showmap" v-show="showmap"> 
        <ditu></ditu>---------------------------------自定义模板 
      </div> 
      </transition> 
    </ul> 
    <div class="fuceng" v-if="showmap"></div> 
 </div> 
</template> 
 
<script> 
import ditu from '@/components/home' 
export default { 
 name: 'app', 
 data () { 
  return { 
   search: '', 
   showd: false, 
   showph: false, 
   showmap: false 
  } 
 }, 
 mounted () { 
  this.init() 
 }, 
 methods: { 
  Search () { 
   if (this.search !== '') { 
    this.$router.push({ 
     path: '/list', 
     query: { 
      serInfo: this.search 
     } 
    }) 
   } else { 
    alert('请输入搜索内容') 
   } 
  }, 
  init: function () { 
   let url = 'http://v3.jiathis.com/code/jia.js' 
   let script = document.createElement('script') 
   script.setAttribute('src', url) 
   document.getElementsByTagName('head')[0].appendChild(script) 
  } 
 }, 
 components: { 
  ditu 
 } 
} 
</script>

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

Javascript 相关文章推荐
jquery延迟加载外部js实现代码
Jan 11 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
Jan 13 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 #Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 #Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 #jQuery
jquery版轮播图效果和extend扩展
Jul 18 #jQuery
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 #Javascript
深入解析Vue 组件命名那些事
Jul 18 #Javascript
js实现本地图片文件拖拽效果
Jul 18 #Javascript
You might like
php部分常见问题总结
2008/03/27 PHP
PHP Memcached应用实现代码
2010/02/08 PHP
php表单提交问题的解决方法
2011/04/12 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
JS 的应用开发初探(mootools)
2009/12/19 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python pdb调试方法分享
2014/01/21 Python
详解Python中for循环的使用
2015/04/14 Python
Django中使用locals()函数的技巧
2015/07/16 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
浅析python中的del用法
2020/09/02 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
搞笑获奖感言
2014/01/30 职场文书
相亲大会策划方案
2014/06/05 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js