Vue路由器的编写

在 Vue 中使用 Vue Router 进行路由管理可以实现单页应用的页面导航。以下是编写 Vue 路由器的步骤：

一、安装 Vue Router

如果使用 Vue CLI 创建项目，在创建项目时可以选择安装 Vue Router。如果项目已经创建，可以在项目目录下使用以下命令安装：

npm install vue-router

 

二、创建路由模块

 

1. 创建路由文件，比如  src/router/index.js 。

2. 引入 Vue 和 Vue Router，以及需要的页面组件：

import Vue from 'vue';

import VueRouter from 'vue-router';

import Home from '../views/Home.vue';

import About from '../views/About.vue';

 

Vue.use(VueRouter);

3. 定义路由：

const routes = [

  {

    path: '/',

    name: 'Home',

    component: Home,

  },

  {

    path: '/about',

    name: 'About',

    component: About,

  },

];

 

 

4. 创建路由器实例并导出：

const router = new VueRouter({

  mode: 'history', // 可以设置为 'hash' 或 'history'

  routes,

});

export default router;

三、在 Vue 实例中使用路由器

 

1. 在  src/main.js  中引入路由器并将其传递给 Vue 实例：

import Vue from 'vue';

import App from './App.vue';

import router from './router';

 

new Vue({

  router,

  render: (h) => h(App),

}).$mount('#app');

 

 

四、在组件中使用路由

 

1. 在页面组件中可以使用  <router-link>  进行页面导航，使用  <router-view>  来显示匹配路由的组件：

<template>

  <div>

    <nav>

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

      <router-link to="/about">About</router-link>

    </nav>

    <router-view />

  </div>

</template>

 

 

五、路由参数和导航守卫

 

1. 路由参数：可以在路由中定义参数，以便在不同页面之间传递数据。

 

- 定义带参数的路由：

{

  path: '/user/:id',

  name: 'User',

  component: User,

},

 

 

- 在组件中获取参数：

 

<template>

  <div>User ID: {{ $route.params.id }}</div>

</template>

 

2. 导航守卫：可以使用导航守卫来控制路由的访问权限和进行一些预处理。

 

- 全局导航守卫：

router.beforeEach((to, from, next) => {

  // 逻辑判断，比如登录验证

  if (to.meta.requiresAuth &&!isLoggedIn()) {

    next('/login');

  } else {

    next();

  }

});

- 组件内的导航守卫：

<script>

export default {

  beforeRouteEnter(to, from, next) {

    // 在进入路由前执行

    next();

  },

  beforeRouteUpdate(to, from, next) {

    // 在当前路由改变但组件被复用时执行

    next();

  },

  beforeRouteLeave(to, from, next) {

    // 在离开当前路由时执行

    next();

  },

};

</script>

以上就是编写 Vue 路由器的基本步骤，可以根据项目需求进行更多的配置和扩展。