这两天学习了Vue.js 感觉路由这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。
项目基本手脚架搭建完毕后,建一个router文件夹,里面配置一个index.js文件。
npm install vue-router vue-resource --save-dev(安装 vue 路由模块vue-router和网络请求模块vue-resource)
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,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中我们可以这样写: