VueRouter笔记

定义路由

import { createMemoryHistory, createRoute } from 'vue-router';
import MyView1 from './MyView1.vue';
import MyView2 from './MyView2.vue';const routes = [{ path: '/1', component: MyView1 },{ path: '/2', component: MyView2 }
];const router = createRouter({history: createMemoryHistory(),routes
});app.use(useRouter());
app.mount('#myApp');

使用路由

<RouterLink to='/1'>Page 1</RouterLink>
<RouterLink to='/2'>Page 2</RouterLink>
<RouterView />

动态参数

const routes = [{path: '/users/:id(\\d+)', component: User},{path: '/users/:name', component: User}
];// User.vue
/*
<p>{{ $route.params.id }}</p>
*/const router = useRouter();
const userId = router.params.id;

嵌套路由

const routes = [{ path: '/users/:id(\\d+)',component: User,children: [{ path: 'profile', component: UserProfile },{ path: 'posts', component: UserPosts }]}
]

具名路由

{ path: 'users', name: 'users', component: User }

跳转到路由

router.push('/users/1');
router.push({ path: '/users/1' });
router.push({ name: '/users/profile', params: {'name': 'alex'}});
router.push({ name: '/users/profile', query: {'name': 'alex'}});
router.replace('/users/1'); // 不保存历史记录。
router.go(1); // 前进
router.go(-2); // 后退2次。

全局路由前置守卫

router.beforeEach((to, from) => {let forward = true;// ..return forward;
});

元数据

{ path: '/users', component: User, meta: { foo: 'bar' }}