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值,切换要显示的组件的名称