一.安装
在vue2项目的根目录下的终端中使用命令下载安装vue-router
//这里选择安装 3 版本,如果不加@3则安装最新的 4 版本,vue2项目会报错
//vue3项目则不用加@3
npm i vue-router@3
二.配置路由
在src 文件下新建文件夹 router ,router下新建文件 index.js
//配置路由的地方
import Vue from "vue";
import VueRouter from "vue-router";
//使用插件
Vue.use(VueRouter)
//引入路由组件
import Home from '@/pages/Home'
import Search from '@/pages/Search'
//配置路由规则并导出
export default new VueRouter({
routes:[
{
path:'/home',
component:Home,
},
{
path: '/search/:keyword',
component: Search,
}
]
})
三.引入
在mian.js中引入并注册路由
import Vue from 'vue'
import App from './App.vue'
//引入路由
import router from './router'
new Vue({
render: h => h(App),
//注册路由
router
}).$mount('#app')
现在路由已经配置好了!
四.实现
在App.vue中实现两个组件的跳转
<template>
<div id="app">
//类似于a标签的提跳转按钮
<router-link to="/home">首页</router-link>
<router-link to="/search">搜索页</router-link>
//占位符,表示想让路由组件显示的位置
<router-view></router-view>
</div>
</template>
这样就实现了点击首页下面占位符的位置就显示/home的信息,点击搜索页同理
五.完结
这就是vue2的路由的基本实现过程。