vue项目中引入vue-router

对vue-router的知识点还没有基本了解的小伙伴可以移步至此篇博客
大白话攻破VueRouter重点知识
其他有兴趣的小伙伴可以移步至
vue项目中引入echarts
vue项目中引入vuex

继续往下就是在vue项目中实战操作了

搭建一个vue项目这里不多赘述，简单过一下：

vue create newtest
cd newtest
npm run serve

此时vue-cli已经帮助搭建一个简单的vue架子了，但其中并没有vue-router；

安装一下vue-router

npm install vue-router

vue-router的原理是把组件和路由进行一一映射，而映射的规则一般都是写在index.js
需要自己在src目录下新建一个

routers/index.js

映射规则文件

index.js

//引入依赖及组件
import Vue from 'vue'
import VueRouter from 'vue-router'

import Router1 from '../components/router1'
import Router2 from '../components/router2'

Vue.use(VueRouter);
//设置组件映射规则
const routes = [
  {
    path: '/',
    component: Router1
  },
  {
    path: '/router2',
    component: Router2
  }
]

const router = new VueRouter({
  routes
})
//导出
export default router;

main.js中引入

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

import router from './router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  //引入导出的router
  router
}).$mount('#app')

App.vue设置路由视图出口

即根据路由映射出的组件将会在router-view标签内展示

<router-view></router-view>