Vue Router安装使用教程

Vue Router 是 Vue.js 的官方路由管理器，用于构建单页面应用（SPA）

安装

通过 npm 安装 VueRouter：

npm install vue-router

使用

创建路由实例

定义路由规则： / 和 /about，对应组件 Home 和 About

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(VueRouter);

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

export default router;

配置 Vue.js 应用程序

将创建的路由实例 router 注入到 Vue 实例中，并将 Vue 实例渲染到页面中的 #app 元素中

import Vue from 'vue';
import App from './App.vue';
import router from './router';

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

创建路由链接

使用 “router-link” 标签创建两个路由链接，分别是指向 / 和 /about

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

创建路由视图

使用 “router-view” 标签创建了路由视图，用于渲染路由规则对应的组件

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

这样，就完成了 VueRouter 的安装和使用