黑马程序员技术交流社区

标题: 单文件路由的使用 [打印本页]

---

作者: liujin407    时间: 2019-6-20 18:20
标题: 单文件路由的使用

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 开启静态访问的服务器      

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2