vue2.0简单路由写法

荷兰豆叶子上的水熊

于 2018-05-21 11:56:50 发布

阅读量811

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/u010200033/article/details/80390328

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Vue2.0中设置简单路由，包括导入VueRouter，使用VueRouter，定义Home、Mine、Idx等组件的路由，并设置重定向、子路由及404页面。同时，展示了beforeEach钩子函数的用法，用于实现登录权限控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
import Home from '../components/home/home.vue'
import Mine from '../components/mine/mine.vue'
import Idx from '../components/index/index.vue'
import Cart from '../components/cart/cart.vue'
import Classify from '../components/classify/classify.vue'
import NotFoundComponent from '../components/notfound/notfound.vue'
import Login from '../components/login/login.vue'

const router = new VueRouter({
    routes:[
        {path:'/',component:Home,redirect:'/index',children:[
            {path:'/mine',name:'mine',component:Mine},
            {path:'/cart',name:'cart',component:Cart},            
            {path:'/index',name:'index',component:Idx},
            {path:'/classify',name:'classify',component:Classify},
        ]},
        { path: '/login',name:'login',component: Login },
        { path: '*', component: NotFoundComponent }
    ]
})

router.beforeEach(function (to, from, next) {  
    const nextRoute = [ 'cart', 'mine'];  
    const user = sessionStorage.getItem('user')  
    //跳转至上述3个页面  
    if (nextRoute.indexOf(to.name) >= 0) {  
        //未登录  
        if (!user) {  
            next({name: 'login'})  
        }else{
            next()
        }  
    }  
   
    next();  
});

export default router;