1. 创建路由router文件夹 ,并在router创建路由的router.js
2. 在router.js 中进行导包并配置路径
1. ```
import Vue from 'vue'
import Router from 'vue-router'
import Child1 from '../components/Child1.vue'
import Child2 from '../components/Child2.vue'
// 告诉vue我要使用路由
Vue.use(Router)
export default new Router({
// 配置路由,配置路径和组件的映射关系
routes:[
{
path:'/',
component:Child1
},
{
path:'/child2',
component:Child2
},
]
})
```
3. 在main.js的入口文件中的vue中 引入路由router
```
import Vue from 'vue'
import App from './App.vue'
import router from './router/router.js'
new Vue({
el:"#app",
// 在入口文件中,引入路由配置
router,
//渲染app里面的类容,返回给html页面
render:function(creater){
return creater(App)
}
})
```
4. 在App.vue的template中通过 <router-view></router-view> 显示路由匹配信息
5. 通过nodel-module/.bin/webpack-dev-server 开启静态访问的服务器
|
|