vue路由的简单使用

1、使用命令 npm install vue-router 导入路由

npm install vue-router 

2、 在项目中新建一个router文件，再在该文件下建一个index.js文件用于配置路由

在index.js中

//配置路由的地方
import Vue from "vue";
import VueRouter from "vue-router";
//使用插件
Vue.use(VueRouter);
//引入路由组件
import Header from "./view/header";
//配置路由
export default new VueRouter({
routes:[
 {
        path:"/header",
        component:Header,
        meta:{show:true}
    },
]
})

3、在入口文件main.js 中引入并使用 

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

new Vue({
  render: h => h(App),
  //注册路由：
  router：router,//当k:v都相同时可以直接写router
  store
}).$mount('#app')

4、确定路由组件展示的地方 

如果要在app.vue中显示

<template>
  <div>
    <!-- 路由组件出口的地方 -->
    <router-view></router-view>
  </div>
</template>