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

大佬教程收集整理的这篇文章主要介绍了深入理解vue2.0路由如何配置问题，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

这两天学习了Vue.js 感觉路由这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。

项目基本手脚架搭建完毕后，建一个router文件夹，里面配置一个index.js文件。

文件内容：

npm install vue-router vue-resource --save-dev（安装 vue 路由模块vue-router和网络请求模块vue-resource）

文件夹下面创建的一些模板---相对路径----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,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
}
]
})

大佬总结

以上是大佬教程为你收集整理的深入理解vue2.0路由如何配置问题全部内容，希望文章能够帮你解决深入理解vue2.0路由如何配置问题所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。