A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© liujin407 初级黑马   /  2019-6-20 18:20  /  954 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文


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

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马