Vuejs教程-Vue 路由

Vuejs教程-Vue.js Routing是在Vue.js中实现页面导航的过程。虽然Vue.js本身没有内置路由功能，但你可以通过使用官方推荐的并得到官方支持的vue-router库来轻松创建支持路由的单页面应用（SPA）。

要在Vue.js应用中实现路由，你可以使用npm或yarn安装vue-router库。在终端中运行以下命令：

npm install vue-router

在主要的JavaScript文件（通常命名为main.js或app.js）中，导入Vue和Vue Router，并创建一个新的Vue Router实例。例如：

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue'; // 你的主Vue组件

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    // 在这里定义你的路由
  ],
});

new Vue({
  el: '#app',
  router,
  render: (h) => h(App),
});

在Vue Router实例中，你需要定义应用的路由。每个路由都以对象形式表示，包含path和component属性。path指定URL路径，component是在访问该路径时应该渲染的Vue组件。例如：

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact },
  ],
});

接下来，为每个路由定义的组件创建Vue组件。例如：

<!-- Home.vue -->
<template>
  <div>
    <h1>首页</h1>
    <!-- 首页内容 -->
  </div>
</template>

<script>
export default {
  // 组件选项
};
</script>

在主Vue组件（通常是App.vue）中使用<router-view>元素来显示当前路由对应的组件：

<!-- App.vue -->
<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  // 组件选项
};
</script>

为了在不同的路由之间导航，可以使用<router-link>组件。当用户点击链接时，<router-link>会渲染一个锚点标签（<a>），并在URL变化时加载相应的路由组件。例如：

<!-- SomeComponent.vue -->
<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link to="/contact">联系</router-link>
  </div>
</template>

<script>
export default {
  // 组件选项
};
</script>

通过以上步骤，你已经在Vue.js项目中设置了路由。现在，当用户点击链接时，相应的组件将在<router-view>元素中根据URL变化动态渲染。这样你就可以创建一个平滑、交互性强的单页面应用，其中不同的视图可以通过路由实现导航。