深入理解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 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
超链接的禁用属性Disabled使用示例
Jul 31 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
基于JavaScript实现轮播图效果
Jan 02 Javascript
JS数组方法some、every和find的使用详情
Oct 05 Javascript
使用Cargo工具高效创建Rust项目
Aug 14 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制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
Python 元组(Tuple)操作详解
2014/03/11 Python
Python操作列表之List.insert()方法的使用
2015/05/20 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
董事长秘书岗位职责
2013/11/29 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
vue动态绑定style样式
2022/04/20 Vue.js
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android