这篇文章主要介绍了vue2.0路由怎么配置，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联公司主要从事成都网站建设、成都网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务五龙口,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792
项目基本手脚架搭建完毕后，建一个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中我们可以这样写：
