vue中路由的基本使用(vue-router)

一.安装

在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的路由的基本实现过程。