vue路由注册及创建

路由文件：router.js

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

//1、定义路由组件并引入
import Main from   '@/views/main.vue';
import Detail from '@/views/detail.vue';
//2、注册路由
Vue.use(VueRouter);
//3、创建一个路由实例
let router=new VueRouter({
  //所有的路由映射，没一个路由就是一个对象
  routes:[
    {
      path:"/",
      name:'Main',
      component:Main
    },
    {
      path:'/detail/:id',
      name:'Detail',
      component:Detail
    }

  ]
})

export default router;

 

　main.js文件

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


//@方便不同的地方使用src目录
import '@/assets/static/css/css.css';
import router from '@/router';
Vue.config.productionTip = false



new Vue({
  // 记得要通过 router 配置参数注入路由，
 // 从而让整个应用都有路由功能
  router,
  render: h => h(App),
}).$mount('#app')

app.vue文件

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

<script> 
import Header from '@/components/Header';
export default {
    name:'App',
    components: {
      KHeader
    }
}
</script>

Header是相对固定的组件，<router-view>将通过路由配置的组件都可以加载出来