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

这两天学习了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 
  } 
 ] 
}) 

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

在app中我们可以这样写：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。