码迷,mamicode.com
首页 > 其他好文 > 详细

vuerouter-8_路由实例

时间:2019-08-22 23:59:45      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:imp   vuerouter   code   dir   out   min   jpg   import   one   

1.创建一个导航组件

技术图片

2.路由的配置:

import Vue from ‘vue‘
import Router from ‘vue-router‘
import Home from ‘@/components/nav/Home‘
import Mine from ‘@/components/nav/Mine‘
import Order from ‘@/components/nav/Order‘
import ShopCar from ‘@/components/nav/ShopCar‘
import Nav from ‘@/components/nav/Nav‘
import Hot from ‘@/components/nav/Home/subPage/hot‘
import Recommend from ‘@/components/nav/Home/subPage/recommend‘
Vue.use(Router)

export default new Router({
linkActiveClass: "active",
routes: [{
path: ‘/Home‘,
name: ‘Home‘,
component: Home,
redirect: "/Home/Hot",
children: [{
path: ‘Hot‘,
name: ‘Hot‘,
component: Hot
},
{
path: ‘Recommend‘,
name: ‘Recommend‘,
component: Recommend
}
]
},
{
path: ‘/Mine‘,
name: ‘Mine‘,
component: Mine
},
{
path: ‘/Order‘,
name: ‘Order‘,
component: Order
},
{
path: ‘/ShopCar‘,
name: ‘ShopCar‘,
component: ShopCar
},
{
path: ‘/Nav‘,
name: ‘mynav‘,
component: Nav
}
]
})

vuerouter-8_路由实例

标签:imp   vuerouter   code   dir   out   min   jpg   import   one   

原文地址:https://www.cnblogs.com/xiao-peng-ji/p/11397259.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!