Vue-router知识点汇总

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Layout from '@/layout'
export const constantRoutes = [{path: '/forgetpsd',name: 'forgetPsd',// 命名路由 ，跳转<router-link :to="{ name: 'forgetPsdr', params: { userId: 123 }}">User</router-link>或者router.push({ name: 'user', params: { userId: 123 }})component: () => import('@/views/login/forget-psd'),hidden: true},{path: '/',component: Layout,redirect: '/index',children: [{path: 'index',name: 'Index',component: () => import('@/views/home/index'),meta: { title: '首页', icon: 'dashboard' }},{path: '/avatarSet',name: 'AvatarSet',component: () => import('@/views/avatarset/avatarset'),meta: { title: '账号设置', icon: 'form' },hidden: true}]},// 404 page must be placed at the end !!!{ path: '*', redirect: '/404', hidden: true }
]const createRouter = () => new Router({// mode: 'history', // require service supportscrollBehavior: () => ({ y: 0 }),routes: constantRoutes
})const router = createRouter()
export function resetRouter() {const newRouter = createRouter()router.matcher = newRouter.matcher // reset router
}export default router

import router from './router'
router.beforeEach(async(to, from, next) => {if (to.path === '/login') {next({ path: '/' })}
})router.afterEach(() => {
})

编程式导航

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)