路由文件: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>将通过路由配置的组件都可以加载出来