VueRouter

前置条件

用vue cli创建Vue项目并安装ElementUI插件

VueRouter

安装VueRouter

npm install vue-router
#安装指定版本号的vue-router
npm i vue-router@3.2.0

使用VueRouter

main.js

//引用router
import router from './router'

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

router/index.js

src下新建router文件夹和index.js
src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
//import Home from '../views/Home.vue'

//使用VueRouter插件
Vue.use(VueRouter)

// 创建路由对应的view
const routes = [
    {
        path: '/',
        name: 'Home',
        component: () => import('../views/Home.vue')
    },
    {
        path: '/user',
        name: 'User',
        component: () => import('../views/User.vue')
    }
]

// 创建VueRouter实例
const router = new VueRouter({
    mode: "history",
    routes
})

//main.js中引用的就是这个router
export default router

视图组件

src/views/Home.vue

src/views/User.vue

router-view展示数据

App.vue中添加router-view，默认展示/路由的内容

router-link改变router-view中内容

HelloWorld.vue

Container容器布局

安装less插件

#css预处理器less
npm i less
#解析器
npm i less-loader@5.0.0

Home.vue

App.vue只留router-view标签

侧边栏CommonSide.vue

在src/components/CommonSide.vue

在views/Home.vue中引入CommonSide组件并在Vue单页组件中使用

CommonAside侧边栏使用json数据

App.vue中把高度改为整屏

#app {
  /* 一屏的高度 */
  height: 100vh;
}

效果: