vue-cli中引入vue-router

1.安装Vue-router

npm install vue-router

2.简化文件夹路径

src同级建立vue.config.js

// vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
        'components': '@/components',
      },
    }
  }
}

3.建立路由对应组件

src同级建立router/index.js文件

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/test1",
    component: () => import('@/components/Test1.vue'),
  },
  {
    path: "/test2",
    component: () => import('@/components/Test2.vue'),
  },
];
const router = new VueRouter({
  routes
})

export default router;

4.将路由挂载到vue实例上

import Vue from 'vue'
import App from './App.vue'

import router from './router/index'

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

5.路由对应的组件页面

Test1.vue

<template>
  <div class="hello">
     test1
  </div>
</template>

Test2.vue

<template>
  <div class="hello">
    test2
  </div>
</template>

6.路由匹配到的组件渲染

app.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

7.演示

推荐下我的公众号

最近在写一些关于在前端行业摸爬滚打还有生活中的趣事来让自己变得更加快乐,追求生活和工作中的进步,欢迎关注:程序媛爱唠嗑