vue路由跳转

462 阅读1分钟

this.$router.push(this.path)  //直接以变量路径

this.$router.push({
    path:'/data'
    query:{name:'zhan'}})                                //以对象形式path + query   用于动态路由  /data?name=zhan
this.$router.push({
    name:'data'
    params:{name:'zhan'}})                              //以对象形式name  + params    用于动态路由    /data/zhan


子路由

   path: "/tab",    component: () => import("../components/Tab.vue"),    redirect: "/tab/Search",    children: [      {        name: "Search",        path: "Search",        component: () => import("../views/Search.vue")    子路由地址   ‘/tab/Search’      }
     ]




动态路由

   path: "/ebook",    component: () => import("../views/ebook/Ebook.vue"),    children: [      {        path: ":fileName",        component: () => import("../components/ebook/EbookReader.vue")//携带参数跳转      }    ]


   path: '/user/:id',
   name: 'user',
   component: () => import("../views/ebook/Ebook.vue")



前端路由

前端路由是根据不同的用户事件,显示不同的页面内容,本质是用户事件事件处理函数之间的对应关系,用户触发事件,响应浏览器,浏览器中含有前端路由,事件处理函数,用户触发事件给到前端路由,响应事件处理函数,事件函数渲染相应内容给用户。

实现简单的前端路由是基于url中的hash实现的,点击菜单时改变url的hash值,根据hash的变化控制组件的切换。

监听window的onhashchange事件,根据获取到的最新的hash值,切换要显示的组件的名称

window.onhashchange = function() { // 通过location.hash获取到最新的hash值 }