vue路由配置

Vue路由官网:https://router.vuejs.org/zh-cn/路由特点:1.保存历史状态2.刷新保留当前页面位置

路由实现原理:通过ajax,h5 history,js原生哈希算法

Vue路由用法:

      首页

      首页内容展示视图

配置路由表:

      先引入

            import Vue from 'vue'

            import Router from 'vue-router'

            Vue.use(Router);

            import组件名from '组件路径'//引入组件

            const routes=[

                  {path:'/',redirect:要跳转的路径},//默认打开路径

                  {path:'路由路径2',component:触发的组件名2},

                  {path:'路由路径3',component:触发的组件名3},

                  ........

                  //二级路由配置

                  {path:'路由路径4',

                   component:触发的组件名4,

                   children:[{path:'',compoent:组件名}]}

            ]

            export default new Router({

                  routes:routes,

                  linkActiveClass:"high"//高亮显示

            });

你可能感兴趣的:(vue路由配置)