Vue router 安装与引入

目录

一、背景

二、安装

三、配置

---

一、背景

一直都是在 vue create 中直接选中安装router。今天新建vue项目，忘了选 router，结果就不知怎么手动创建了。。。

只好拿出默认安装的vue项目对照修改，也在此也记录一下。

二、安装

npm install vue-router --save

三、配置

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

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

Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            name: 'index',
            component: index
        },
        {
            path: '/hello',
            name: 'hello',
            component: () => import('../views/hello.vue')
        }
    ]
})

export default router

2、main.js 中导入并注册

import Vue from 'vue'
import App from './App.vue'
// 引入
import router from './router'

Vue.config.productionTip = false

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

3、App.vue 添加 <router-view/>

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

<style lang="stylus">
  * {
    padding: 0;
    margin: 0;
  }
</style>