import Vue from 'vue' import VueRouter from 'vue-router' // import 别名 from '文件' import Home from '../views/Home' import About from '../views/About' import First from '../views/FirstCP' // 路由配置 // 1)当用户在浏览器中访问的路由是 / ,router插件就会加载 Home.vue文件,同理 /about 就是 About.vue文件 // 2)将加载的 Home.vue文件 或者 About.vue文件,去替换App.vue文件中的 <router-view />占位符 // 3)用redirect配置来实现路由的重定向 const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/home', redirect: '/', // 路由的重定向 }, { path: '/about', name: 'About', component: About }, { path: '/first', name: 'First', component: First } ];
根组件占位渲染页面组件
<!-- 1) App.vue是项目的根组件,是唯一由main.js加载渲染的组件,就是替换index页面中的<div id="app"></div>的占位标签 2) 实际开发中App.vue文件中,只需要书写下方五行代码即可(可以在此基础上额外增加其他代码) 3)router-view是前台路由占位标签,由router插件控制,可以在router的配置文件中进行配置 4) router-view就是根据router在index.js中配置的路由关系,完成指定路径匹配指定页面组件,进行渲染 5) router-view会被不同的页面组件替换,就形成了页面跳转 --> <template> <div id="app"> <!-- 前台路由占位标签,末尾的/代表单标签的结束 --> <router-view /> </div> </template>