1. Vue 路由的安装

Vue 路由的安装

• 输入如下命令进行安装

  npm install vue-router
  

• 路由配置

1. src文件夹内创建router文件夹
2. router文件夹内创建index.js文件

3. router/index.js做如下配置

   import Vue from "vue"
   import VueRouter from "vue-router"
   import Home from "../views/Home"
   import Info from "../views/Info"
   
   Vue.use(VueRouter) // 安装VueRouter插件
   const routes = [   // 配置路由
       {path: "/", redirect: "/home"},
       {path: "/home", component: Home},
       {path: "/info", component: Info}
   ]
   const router = new VueRouter({  //创建路由实例
       routes
   })
   export default router //将路由导出
   

4. src/main.js做如下配置

   import Vue from 'vue'
   import App from './App.vue'
   import router from "./router/index"  //导入路由器实例
   
   Vue.config.productionTip = false
   
   new Vue({
     router,  //将路由器注册至Vue上
     render: h => h(App),
   }).$mount('#app')