Vue2下的路由的基本使用

标签：基本 About Vue2 VueRouter import router Home 路由

路由

1. 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
2. 前端路由：key是路径，value是组件。

1.基本使用

1. 安装vue-router，命令：npm i vue-router

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

3. 编写router配置项:  

//引入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

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

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

          4. 指定展示位置

<router-view></router-view>

示例：

 

 

 

 

 

 

 

 

1

标签：基本,About,Vue2,VueRouter,import,router,Home,路由
From： https://www.cnblogs.com/anjingdian/p/17011471.html