vue路由配置

项目基本手脚架搭建完毕后，建一个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>