加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

深入理解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中我们可以这样写:

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读