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
    }
  ]
})

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

在app中我们可以这样写：