深入理解vue2.0路由如何配置问题
发布时间:2020-12-17 02:52:33 所属栏目:百科 来源:网络整理
导读:这两天学习了Vue.js 感觉路由这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。 项目基本手脚架搭建完毕后,建一个router文件夹,里面配置一个index.js文件。 文件内容: npm install vue-router vue-resource --save-dev(安装 vue 路由模块vu
这两天学习了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 } ] }) 接下来就是在每一个模块文件中加入这样的一句话暴露出去:
export default {
name: 'about' ---自定义模块名字
}
在app中我们可以这样写: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |