轻松安装VueRouter安装完毕后在模板中使用路由

一、轻松安装Vue Router

想要在Vue项目中使用路由？第一步就是安装Vue Router。简单几步，就能让Vue支持路由管理。

• 使用npm：npm install vue-router
• 使用yarn：yarn add vue-router

安装完毕后，记得确认一下是否安装成功哦。

二、创建路由配置文件

接下来，我们需要创建一个路由配置文件，通常是放在项目的 src 目录下。

1. 创建一个文件，比如叫做 router.js。
2. 导入Vue和Vue Router。
3. 定义路由规则，每个路由都有路径、名称和对应的组件。
4. 创建并导出路由实例。

代码示例：

import Vue from 'vue'; import VueRouter from 'vue-router'; import Home from './views/Home.vue'; Vue.use(VueRouter); const routes = [ { path: '/', name: 'home', component: Home }, // ...更多路由配置 ]; export default new VueRouter({ routes }); 

三、在Vue实例中使用路由

现在，我们得把路由实例加入到Vue实例中。

1. 在Vue实例中导入路由配置文件。
2. 将路由实例添加到Vue实例中。
3. 在模板中使用 <router-link> 创建导航链接，使用 <router-view> 显示路由对应的组件。

代码示例：

new Vue({ router, // ... }).$mount('#app'); 

<router-link to="/home">Home</router-link> <router-view></router-view> 

const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ { path: 'profile', component: UserProfile }, { path: 'posts', component: UserPosts } ] } ] });

router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { if (!isAuthenticated()) { next({ path: '/login', query: { redirect: to.fullPath } }); } else { next(); } } else { next(); } });