使用Vue实现动态路由

使用Vue实现动态路由

// 定义路由表
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/user/:id', component: User }
];

// 创建路由实例
const router = new VueRouter({
  routes
});

// 创建Vue实例
new Vue({
  router,
  el: '#app'
});

// 定义动态路由参数
const User = {
  template: '
User {{ $route.params.id }}
'
};

// 跳转到动态路由
router.push('/user/123');

上述代码中，使用VueRouter创建一个路由实例。路由表定义了多个路径与组件之间的映射关系。而动态路由则是通过指定参数来动态生成路径的方式，使得路由的配置具有更大的灵活性。