Vue笔记 基本路由 嵌套（多级）路由及实例代码

一、基本路由

1、基本使用

（1）安装vue-router,命令 npm i vue-router

（2）应用插件：Vue.use(VueRouter)

在main.js文件中修改：

  import Vue from 'vue'
  import App from './App.vue'
  //引入插件
  import VueRouter from 'vue-router'
  //引入路由器
  import router from './router'

  Vue.config.productionTip = false
  //应用插件
  Vue.use(VueRouter)

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

（3）编写router配置项:

新建router文件夹：下面新建index.js文件

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

//引入组件
import MyAbout from '../components/MyAbout'
import MyHome from '../components/MyHome'


//创建并暴露路由器
export default new VueRouter({
   routes:[
      {
          path:'/about',
          component:MyAbout
      },
      {
        path:'/home',
        component:MyHome
          
    }
   ]
})

4、实现切换（active-class可配置高亮样式）

<router-link class="list-group-item " active-class="active" to="/about">About</router-link>