router.js的常用写法

it2025-10-20  7

例如1:使用变量,减少代码量

{         path: '/pages/:name', // 主页面,各列表页         // name: 'mylist',         component: () =>             import ('@/dymatrixfrontweb/views/pageList/pageList.vue'),         meta: { mainPage: true }     }

例如2:规范写法,清晰明了,父子组件按层级

{     path: '/',     redirect: '/pages' }, {、     path: '/pages',     component: () =>         import('@/views/PagesView'),     children: [{         path: '',         redirect: '/pages/BaseInstall'     }, {         path: 'baseInstall',         name: 'baseInstall',         component: () =>             import('@/views/BaseInstall')     }, ] }

vue scrollBehavior 切换到新路由时,页面要滚动到顶部或保持原先的滚动位置

const router = new Router({ // mode: 'history', routes, base: process.env.BASE_URL, scrollBehavior(to, from, savedPosition) { if (savedPosition) { return savedPosition } else { if (to.hash) { return { selector: to.hash } } return { x: 0, y: 0 } } } })

 当你的Vue项目在当前的路由下企图再次导航到当前路由时就会出现NavigationDuplicated的问题(通俗来讲就是多次进入了同一个path

const originalPush = Router.prototype.push Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }

 

最新回复(0)