美文网首页
vue路由配置

vue路由配置

作者: 郭月帅 | 来源:发表于2017-09-22 17:03 被阅读0次

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

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

    Vue路由用法:

          <router-link to="路由路径" tag="自定义标签">首页</router-link>

          <router-view>首页内容展示视图</router-view>

    配置路由表:

          先引入

                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路由配置

          本文链接:https://www.haomeiwen.com/subject/jrvfextx.html