深入理解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模拟页面加载进度条的实现代码
Dec 19 Javascript
使用js检测浏览器的实现代码
May 14 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
jquery简单倒计时实现方法
Dec 18 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
JS判断一个数是否是水仙花数
Jun 11 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
js中的深浅拷贝问题简析
May 10 Javascript
vue中的过滤器实例代码详解
Jun 06 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
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
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
8个PHP程序员常用的功能汇总
2014/12/18 PHP
php轻松实现文件上传功能
2016/03/03 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
js注意img图片的onerror事件的分析
2011/01/01 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
详解JS模块导入导出
2017/12/20 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
Flask框架工厂函数用法实例分析
2019/05/25 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
python环境下安装opencv库的方法
2020/03/05 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
优秀的计算机专业求职信范文
2013/12/27 职场文书
财务管理职业生涯规划范文
2013/12/27 职场文书
《锄禾》教学反思
2014/04/08 职场文书
教师个人自我评价范文
2014/04/13 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
结婚老公保证书
2015/02/26 职场文书
面试复试通知单
2015/04/24 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
vue实现锚点定位功能
2021/06/29 Vue.js
python Tkinter模块使用方法详解
2022/04/07 Python