路由

需要指定版本安装vue-router3才能在vue2中使用

使用方法

1.安装vue-router

命令：npm i vue-router

2.应用插件

Vue.use(VueRouter)

3.编写router配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 引入VueRouter
import VueRouter from 'vue-router'

// 引入Luyou组件
import About from '../components/About'
import Home from '../components/Home'

// 创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
  routes: [
    {
      path:'/about',
      component:About
    },
    {
      path:'/home',
      component:Home
    }
  ]
})

// 暴露router
export default router

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

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

5.指定展示位置

1
<router-view></router-view>