vue-router路由

Posted 2021-03-10 kanaliya

1.安装vue-router

npm install vue-router --save

2.使用vue-router

import VueRouter from 'vue-router'
import Vue from 'vue'
// 1,通过Vue.use(插件) 安装插件
Vue.use(VueRouter)
// 2.配置路由及组件映射关系
const routes = [{
    path: '/home',
    component: () => import('../components/Home')
}, {
    path: '/about',
    component: ()=>import('../components/About')
}]
// 3.创建VueRouter对象
const router = new VueRouter({
    routes
})
export default router

3.使用router-view及router-link

    <div id="app">
        <router-link to="/home">首页</router-link>
        <router-link to="/about">关于</router-link>
        <router-view></router-view>
    </div>