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' }}