vue2.x中路由实例

在 Vue 2.x 中，我们可以使用 Vue Router 来实现路由功能。下面是一个简单的 Vue Router 实例的示例：

1. 安装 Vue Router：在命令行中运行以下命令来安装 Vue Router：

npm install vue-router

2. 创建路由实例：在项目的 main.js 文件中，引入 Vue 和 Vue Router，并创建一个路由实例。

import Vue from 'vue'
import VueRouter from 'vue-router'

// 引入组件
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'

Vue.use(VueRouter)

// 创建路由实例
const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ]
})

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

3. 配置路由：在路由实例中，我们通过 routes 配置项来定义路由规则。每个路由规则都包含一个 path 属性和一个 component 属性，用于指定路径和对应的组件。

4. 在组件中使用路由：在需要使用路由的组件中，可以使用 `<router-link>` 和 `<router-view>` 标签来实现页面的跳转和组件的渲染。

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

通过以上步骤，我们可以在 Vue 2.x 中创建并配置一个简单的路由实例。在页面中使用 `<router-link>` 标签可以实现页面之间的跳转，而 `<router-view>` 标签用于渲染当前路由对应的组件。