1.删除多余组件,使环境赶紧
1. 整理App.vue, 删除多余内容,在template 模板区域增加一个路由占位符
router-view:渲染路径匹配到的视图组件
<template> <div id="app"> <!--路由占位符--> <router-view></router-view> </div> </template> <script> export default { name: 'app' } </script>
2.删除components下的所有组件
3.删除views文件夹
4.整理路由规则:router -> index.js
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) // 路由规则 const routes = [ ] const router = new VueRouter({ routes }) export default router
5.npm run serve 启动正常
2.渲染新的组件
1. components -> 新增Demo1.vue, 一个组件包括3个部分:1.结构,2.行为,3.样式 , 样式scoped 表示当前样式只在当前组件中生效
<template> <div>this is demo1</div> </template> <script> export default { } </script> <style lang="less" scoped> </style>
2. 到路由中添加路由规则 router -> index.js
1. 导入组件
2.添加路由规则 :路由路径,名字,组件
import Vue from 'vue' import VueRouter from 'vue-router' import Demo1 from '../components/Demo1.vue' Vue.use(VueRouter) // 路由规则 const routes = [ { path: '/demo1', name: 'Demo1', component: Demo1 } ] const router = new VueRouter({ routes }) export default router
3.访问:http://localhost:8080/#/demo1
3. 路由重定向
1. 在router -> index.js 中新增一个路由规则, 访'/’的时候跳转‘/demo1’
const routes = [ { path: '/', redirect: '/demo1' }, { path: '/demo1', name: 'Demo1', component: Demo1 } ]