微客导航 » 文章资讯 » 深入理解vue2.0路由如何配置问题

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

2024-01-27 05:50:03 298

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

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

文件内容：

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

importVuefrom'vue'
importRouterfrom'vue-router'（----引入路由---注释说明）
importAboutfrom'@/components/about'（--这些需要引入的是components文件夹下面创建的一些模板---相对路径----about代表about.vue模块）
importHomefrom'@/components/home'
importBrandfrom'@/components/brand'
importCompanyfrom'@/components/company'
importConnectfrom'@/components/connect'
importMainfrom'@/components/main'
importJoinfrom'@/components/join'
importNewsfrom'@/components/news'
importProductsfrom'@/components/products'
importson1from'@/components/son1'
importson2from'@/components/son2'
importlistfrom'@/components/list'
importnewListfrom'@/components/newList'
importculturefrom'@/components/culture'
importcertificationfrom'@/components/certification'
importzhuanjiafrom'@/components/zhuanjia'
Vue.use(Router)（--使用---）

exportdefaultnewRouter({
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,
children:[
{
path:'/',
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中我们可以这样写：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐