轻松安装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();
  }
});