Vue-Router的基本使用

路由的基本使用

1.安装vue-router，命令：npm i vue-router（注意：Vue3用的是router4,Vue2不能用router4,Vue2下载的时候要注意使用npm i vue-router@3）

2.在main.js中引入vue-router,并应用插件：Vue.use(VueRouter)

3.一般新建一个router文件夹，在里面配置所有的路由

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'

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

4.使用

<!-- Vue中借助router-link标签实现路由的切换 -->
  <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
  <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>

5.展示

<!-- 指定组件的呈现位置 -->
  <router-view></router-view>

6.配置高亮样式（active-class可配置高亮样式）

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