weex使用路由导航

Question

weex使用路由导航

发布于
2017-12-20

更新于
2017-12-20

新手上路，请多包涵

1.问题：vue.runtime.js:580 [Vue warn]: Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

2.index.vue

<template>
  <div class="wrapper" id="app">
    <router-view class="router_class"></router-view>
    <tab_bar class="tabbar" @tabTo="TabTo"></tab_bar>
  </div>
</template>

<style>
.router_class{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
  .tabbar{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 90px;
  }
</style>

<script>
  var modal = weex.requireModule('modal');
  import tab_bar from './component/tabBar.vue'

  export default {

      components:{
          'tab_bar':tab_bar
      },
      methods:{
          TabTo(_result){
              console.log(" "+_result)
              let _key=_result.data.key || '';
              this.$router && this.$router.push('/'+_key)
          }
      }
  }

</script>

3.router.js



import Router from 'vue-router'
import home from './Views/Home.vue'
import video from './Views/Video.vue'
import shoot from './Views/Shoot.vue'
import message from './Views/Messages.vue'
import my from './Views/My.vue'


Vue.use(Router)

export default new Router({

    routes:[
        {
            path:'/',
            redirect:home
        },
        {
            path:'/Home',
            component:home
        },
        {
            path:'/Video',
            component:video
        },
        {
            path:'/Shoot',
            component:shoot
        },
        {
            path:'/Messages',
            component:message
        },
        {
            path:'/My',
            component:my
        }
    ]
})

5.entry.js


import App from './index.vue'
import router from './router.js'


new Vue(Vue.util.extend({el:'#root',router},App));
router.push('/');

6.webpack.config.js

const pathTo = require('path');
const fs = require('fs-extra');
const webpack = require('webpack');
const entry = {index:pathTo.resolve('src','entry.js')};
const weexEntry = {index:pathTo.resolve('src','entry.js')};
const vueWebTemp = 'temp';
const hasPluginInstalled = fs.existsSync('./web/plugin.js');
const isWin = /^win/.test(process.platform);
let fileType = '';
// Wraping the entry file
const getEntryFileContent = (entryPath, vueFilePath) => {
    let relativePath = pathTo.relative(pathTo.join(entryPath, '../'), vueFilePath);
    let contents = '';
    /**
     * The plugin's logic currently only supports the .we version
     * which will be supported later in .vue
     */
    if (hasPluginInstalled) {
      const plugindir = pathTo.resolve('./web/plugin.js');
      contents = 'require(\'' + plugindir + '\') \n';
    }
    if (isWin) {
      relativePath = relativePath.replace(/\\/g, '\\\\');
    }
    contents += 'var App = require(\'' + relativePath + '\')\n';
    contents += 'App.el = \'#root\'\n';
    contents += 'new Vue(App)\n';
    return contents;
  }
  // Retrieve entry file mappings by function recursion
const walk = (dir) => {
    dir = dir || '.';
    const directory = pathTo.join(__dirname, 'src', dir);
    fs.readdirSync(directory).forEach((file) => {
      const fullpath = pathTo.join(directory, file);
      const stat = fs.statSync(fullpath);
      const extname = pathTo.extname(fullpath);
      if (stat.isFile() && extname === '.vue' || extname === '.we') {
        if (!fileType) {
          fileType = extname;
        }
        if (fileType && extname !== fileType) {
          console.log('Error: This is not a good practice when you use ".we" and ".vue" togither!');
        }
        const name = pathTo.join(dir, pathTo.basename(file, extname));
        if (extname === '.vue') {
          const entryFile = pathTo.join(vueWebTemp, dir, pathTo.basename(file, extname) + '.js');
          fs.outputFileSync(pathTo.join(entryFile), getEntryFileContent(entryFile, fullpath));
          entry[name] = pathTo.join(__dirname, entryFile) + '?entry=true';
        }
        weexEntry[name] = fullpath + '?entry=true';
      } else if (stat.isDirectory() && file !== 'build' && file !== 'include') {
        const subdir = pathTo.join(dir, file);
        walk(subdir);
      }
    });
  }
  // Generate an entry file before writing a webpack configuration
walk();
/**
 * Plugins for webpack configuration.
 */
const plugins = [
  /*
   * Plugin: UglifyJsPlugin
   * Description: UglifyJS plugin for webpack
   * See: https://github.com/webpack-contrib/uglifyjs-webpack-plugin
   */
  new webpack.optimize.UglifyJsPlugin({
    minimize: true
  }),
  /*
   * Plugin: BannerPlugin
   * Description: Adds a banner to the top of each generated chunk.
   * See: https://webpack.js.org/plugins/banner-plugin/
   */
  new webpack.BannerPlugin({
    banner: '// { "framework": ' + (fileType === '.vue' ? '"Vue"' : '"Weex"') + '} \n',
    raw: true,
    exclude: 'Vue'
  })
];
// Config for compile jsbundle for web.
const webConfig = {
  context: pathTo.join(__dirname, ''),
  entry: entry,
  output: {
    path: pathTo.join(__dirname, 'dist'),
    filename: '[name].web.js'
  },
  /**
   * Developer tool to enhance debugging
   *
   * See: http://webpack.github.io/docs/configuration.html#devtool
   * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
   */
  devtool: 'source-map',
  /*
   * Options affecting the resolving of modules.
   *
   * See: http://webpack.github.io/docs/configuration.html#module
   */
  module: {
    // webpack 2.0 
    rules: [{
      test: /\.js$/,
      use: [{
        loader: 'babel-loader'
      }],
      exclude: /node_modules(?!(\/|\\).*(weex).*)/
    }, {
      test: /\.vue(\?[^?]+)?$/,
      use: [{
        loader: 'vue-loader',
        options: {
          compilerModules: [
            {
              postTransformNode: el => {
                el.staticStyle = `$processStyle(${el.staticStyle})`
                el.styleBinding = `$processStyle(${el.styleBinding})`
              }
            }
          ]
        }
      }]
    }]
  },
  /*
   * Add additional plugins to the compiler.
   *
   * See: http://webpack.github.io/docs/configuration.html#plugins
   */
  plugins: plugins
};
// Config for compile jsbundle for native.
const weexConfig = {
  entry: weexEntry,
  output: {
    path: pathTo.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  /*
   * Options affecting the resolving of modules.
   *
   * See: http://webpack.github.io/docs/configuration.html#module
   */
  module: {
    rules: [{
      test: /\.js$/,
      use: [{
        loader: 'babel-loader'
      }],
      exclude: /node_modules(?!(\/|\\).*(weex).*)/
    }, {
      test: /\.vue(\?[^?]+)?$/,
      use: [{
        loader: 'weex-loader'
      }]
    }, {
      test: /\.we(\?[^?]+)?$/,
      use: [{
        loader: 'weex-loader'
      }]
    }]
  },
  /*
   * These options configure whether to polyfill or mock certain Node.js globals and modules. 
   * This allows code originally written for the Node.js environment to run in other environments like the browser.
   *
   * See: https://webpack.js.org/configuration/node/#node
   */
  node: {
    setImmediate: false
    // See "Other node core libraries" for additional options.
  },
  /*
   * Add additional plugins to the compiler.
   *
   * See: http://webpack.github.io/docs/configuration.html#plugins
   */
  plugins: plugins
};
// If The fileType is '.we', only need to use weexConfig for building. 
if (fileType === '.we') {
  module.exports = weexConfig;
} else {
  module.exports = [webConfig, weexConfig];
}

运行效果：
图片描述