vue-router 路由4｜青训营

router配置

创建文件夹src/router/index.js
main.js中应用插件
// 引入vue-router
import VueRouter from 'vue-router'
 
Vue.user(VueRouter)//增加了一个$route
 
new Vue({
  render: h => h(App),
  router
}).$mount('#app')
配置src/router/index.js
import News from '../pages/News'  //导入路由组件
import Home from '../pages/Home'
import Message from '../pages/Message'
 
// 创建一个路由器并暴露
const router = new VueRouter({
    routes:[
        // 重定向，在项目跑起来的时候，访问/，立马让他定向到首页
        {
            path: '*',
            redirect: '/home'
        },
        {
            name:'zhuye',
            path:'/home',
            component:Home,
            meta:{
                isAuth:true,
                title:'主页'
            },
            children:[
                {
                    name:'xiaoxi',
                    path:'message',//二级、三级路由配置时不用写父亲路径，也不用斜杠
                    component:Message,
                    redirect:'message/news' //重定向路径
                    children:[
                        {
                            path:'news',
                            component:News
                        },
                    ]
                }
            ]
        },
    ]
})

当路由很多时可以配置将配置的路由信息导出到当前目录的router.js文件夹下，index.js文件夹引用router.js文件夹也可