微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

文件内容

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

rush:js;"> 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,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
}
]
})

接下来就是在每一个模块文件中加入这样的一句话暴露出去:

rush:js;">

在app中我们可以这样写:

rush:js;">

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐