Vue Router 4.0：轻松搭建Vue3.0路由

2024-04-01 技术资讯推广

在vue3.0中，我们可以很容易地定义子路由，让我们来看一下如何挂载。我们需要在根组件中创建一个路由器，并将其挂载到Vue实例上。我们在用户页面的路由配置中添加了一个子路由，子路由可以像这样添加到父路由的children中。现在，我们已经成

Vue Router4.0的安装

搞定 Vue3.0的路由功能？那就先安装 vue router 4.0！其实挺简单的：

bash
npm install vue-router@next
npm install vue-router@4.0.0-beta.7

创建根组件和挂载路由器

首先，把路由器扔到大本营的组件里面，再和Vue实例捆绑下，咱们的应用就有导航咯！

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  },
  {
    path: '/user',
    component: () => import(/* webpackChunkName: "user" */ './components/User.vue'),
    children: [
      {
        path: '',
        component: () => import(/* webpackChunkName: "user-profile" */ './components/UserProfile.vue')
      },
      {
        path: 'posts',
        component: () => import(/* webpackChunkName: "user-posts" */ './components/UserPosts.vue')
      }
    ]
  }
];
const router = createRouter({
  history: createWebHistory(),
  routes
});
const app = createApp(App);
app.use(router);
app.mount('#app');

定义主要路由和子路由

在Vue3.0上整主路由和子路由简直就是轻松愉快！稍微做点设置，你就可以搭建各种复杂的路由结构了。无论是跳转到别的页面还是在同个页面里嵌套其他内容，都so easy！

示例代码演示

咱们就用一段代码来说明白怎么设置 Vue 3.0的首页和子页面，比如我们的网站有个主页(Home)，介绍主页(About)还有个人资料页(User)。而且，用户个人页下面还有两个小页面哟～

添加子路由插槽

那种副路由孔位在网页设计里很常用，这样可以一下子看好多页面，超级简单！还能一页解决所有版面问题。

  
    User
    
  


插槽名称设置

哈喽，大家好告诉你们，Vue Router 的4.0新版居然可以让我们在插槽名字上留空了！只用告诉router哪个子路由要加，它自己就能帮我们找到位置插进去！

子路由组件模板设置

搞定耶！现在我们只需要在子路由对应的模板里加点花样，就能让它们在父组件中闪亮登场，霸占整个页面咯！

灵活挂载多个子路由

用上了vue3.0新的路由功能，咱就能随心所欲地把各个组件放进不同的路由里头，原本复杂的程序瞬间变得高大上起来，以后更新升级什么的也轻松多了！

  
    User Profile
  


好消息！大家期待已久的Vue 3.0更新后，路由变得更好用了！今天就来聊聊它吧～不再头疼如何添加子路由，你会发现操作起来超轻松，能更快处理应用程序里面的各种页面元素，既节约了时间又让用户用得开心，棒极了！

			    						    						    						    					    		
			    					    				    					    			 原文链接：https://www.icz.com/technicalinformation/web/javascript/2024/04/12569.html，转载请注明出处~~~