【vue2】路由之 Vue Router

在Vue 2中，Vue Router是一个用于构建单页面应用的工具。以下是如何使用Vue Router的基本步骤和示例代码：

1. 安装Vue Router：

npm install vue-router

2. 在你的Vue项目中设置Vue Router：

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
 
// 路由组件
import Home from './components/Home.vue'
import About from './components/About.vue'
 
// 使用Vue Router插件
Vue.use(VueRouter)
 
// 创建路由实例
const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ]
})
 
// 创建和挂载根实例
new Vue({
  router, // 使用路由
  render: h => h(App)
}).$mount('#app')

3. 在你的Vue组件中使用<router-link>来导航和<router-view>来显示当前路由的组件：

<!-- App.vue -->
<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>
 
<script>
export default {
  // ...
}
</script>

这个简单的例子展示了如何在Vue 2应用中设置Vue Router，并使用<router-link>和<router-view>组件来控制和显示不同的视图。