vue如何路由页面

使用Vue.js进行页面路由的核心步骤包括：1、安装Vue Router库；2、配置路由；3、创建路由组件；4、在应用中使用路由。接下来，我们将详细讲解每一步。

一、安装Vue Router库

要在Vue.js项目中使用路由，首先需要安装Vue Router库。你可以通过以下命令来安装：

npm install vue-router

安装完成后，在你的Vue项目中引入Vue Router：

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

二、配置路由

配置路由是将URL路径与组件相对应。首先，创建一个路由配置文件，例如router/index.js。在这个文件中，你可以定义你的路由规则：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
Vue.use(VueRouter);
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});
export default router;

三、创建路由组件

在上一步中，我们提到了Home.vue和About.vue组件。接下来，我们需要在views目录下创建这些组件。每个组件都是一个单独的Vue文件：

Home.vue

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>
<script>
export default {
  name: 'Home'
};
</script>

About.vue

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>
<script>
export default {
  name: 'About'
};
</script>

四、在应用中使用路由

现在，我们需要在主应用文件中使用这些路由。在src/main.js文件中引入路由配置，并将其添加到Vue实例中：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

然后在App.vue中添加<router-view>，它将用于显示匹配的路由组件：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App'
};
</script>

五、导航链接

为了在页面之间导航，可以使用<router-link>组件。这个组件会渲染一个带有正确URL的链接，并在点击时触发相应的路由：

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App'
};
</script>

六、路由模式

Vue Router有两种路由模式：hash模式和history模式。默认是hash模式，它使用URL中的哈希符号（#）。history模式则利用了HTML5 History API，URL看起来更干净，但需要服务器配置支持。

Hash模式：

const router = new VueRouter({
  mode: 'hash',
  routes
});

History模式：

const router = new VueRouter({
  mode: 'history',
  routes
});

七、路由元信息和导航守卫

Vue Router允许你为每个路由定义元信息（meta fields），并在导航守卫中使用它们来执行全局或局部的路由逻辑。

定义元信息：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { requiresAuth: true }
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

导航守卫：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // This route requires auth, check if logged in
    // If not, redirect to login page.
    if (!auth.isLoggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      });
    } else {
      next();
    }
  } else {
    next(); // Make sure to always call next()!
  }
});

总结

通过1、安装Vue Router库、2、配置路由、3、创建路由组件、4、在应用中使用路由，你可以轻松地为Vue.js应用添加强大的路由功能。此外，合理使用导航链接、路由模式、路由元信息和导航守卫，可以使你的应用更加灵活和安全。希望这些步骤和建议能帮助你更好地理解和应用Vue Router，实现更复杂和丰富的单页面应用。