├── .babelrc
├── .editorconfig
├── .gitattributes
├── .gitignore
├── .postcssrc.js
├── README.md
├── build
    ├── build.js
    ├── check-versions.js
    ├── logo.png
    ├── utils.js
    ├── vue-loader.conf.js
    ├── webpack.base.conf.js
    ├── webpack.dev.conf.js
    └── webpack.prod.conf.js
├── config
    ├── dev.env.js
    ├── index.js
    └── prod.env.js
├── index.html
├── package-lock.json
├── package.json
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── HelloWorld.vue
    │   ├── about.vue
    │   ├── about_child
    │   │   ├── hobby.vue
    │   │   ├── study.vue
    │   │   └── work.vue
    │   ├── document.vue
    │   ├── document_slide.vue
    │   ├── leaving.vue
    │   ├── tuozhuai
    │   │   └── index.vue
    │   ├── undefined.vue
    │   └── user.vue
    ├── data.js
    ├── main.js
    └── router
    │   └── index.js
└── static
    └── .gitkeep


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-vue-jsx", "transform-runtime"]
12 | }
13 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | *.css linguist-language=vue
2 | *.less linguist-language=vue
3 | *.js linguist-language=vue
4 | *.html linguist-language=vue
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/michael-ciniawsky/postcss-load-config
 2 | 
 3 | module.exports = {
 4 |   "plugins": {
 5 |     "postcss-import": {},
 6 |     "postcss-url": {},
 7 |     // to edit target browsers: use "browserslist" field in package.json
 8 |     "autoprefixer": {}
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-demo
 2 | 
 3 | > 世上最完整的Vue-Router配置demo，包含了有关Vue-Router所有相关核心知识点，一个需求多种解决方式的体现，据说配置出了一朵花儿，不服来战！
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install
10 | 
11 | # serve with hot reload at localhost:1234
12 | npm run dev
13 | 
14 | # build for production with minification
15 | npm run build
16 | 
17 | ```
18 | 
19 | 


--------------------------------------------------------------------------------
/build/build.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | require('./check-versions')()
 3 | 
 4 | process.env.NODE_ENV = 'production'
 5 | 
 6 | const ora = require('ora')
 7 | const rm = require('rimraf')
 8 | const path = require('path')
 9 | const chalk = require('chalk')
10 | const webpack = require('webpack')
11 | const config = require('../config')
12 | const webpackConfig = require('./webpack.prod.conf')
13 | 
14 | const spinner = ora('building for production...')
15 | spinner.start()
16 | 
17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
18 |   if (err) throw err
19 |   webpack(webpackConfig, (err, stats) => {
20 |     spinner.stop()
21 |     if (err) throw err
22 |     process.stdout.write(stats.toString({
23 |       colors: true,
24 |       modules: false,
25 |       children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
26 |       chunks: false,
27 |       chunkModules: false
28 |     }) + '\n\n')
29 | 
30 |     if (stats.hasErrors()) {
31 |       console.log(chalk.red('  Build failed with errors.\n'))
32 |       process.exit(1)
33 |     }
34 | 
35 |     console.log(chalk.cyan('  Build complete.\n'))
36 |     console.log(chalk.yellow(
37 |       '  Tip: built files are meant to be served over an HTTP server.\n' +
38 |       '  Opening index.html over file:// won\'t work.\n'
39 |     ))
40 |   })
41 | })
42 | 


--------------------------------------------------------------------------------
/build/check-versions.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const chalk = require('chalk')
 3 | const semver = require('semver')
 4 | const packageConfig = require('../package.json')
 5 | const shell = require('shelljs')
 6 | 
 7 | function exec (cmd) {
 8 |   return require('child_process').execSync(cmd).toString().trim()
 9 | }
10 | 
11 | const versionRequirements = [
12 |   {
13 |     name: 'node',
14 |     currentVersion: semver.clean(process.version),
15 |     versionRequirement: packageConfig.engines.node
16 |   }
17 | ]
18 | 
19 | if (shell.which('npm')) {
20 |   versionRequirements.push({
21 |     name: 'npm',
22 |     currentVersion: exec('npm --version'),
23 |     versionRequirement: packageConfig.engines.npm
24 |   })
25 | }
26 | 
27 | module.exports = function () {
28 |   const warnings = []
29 | 
30 |   for (let i = 0; i < versionRequirements.length; i++) {
31 |     const mod = versionRequirements[i]
32 | 
33 |     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
34 |       warnings.push(mod.name + ': ' +
35 |         chalk.red(mod.currentVersion) + ' should be ' +
36 |         chalk.green(mod.versionRequirement)
37 |       )
38 |     }
39 |   }
40 | 
41 |   if (warnings.length) {
42 |     console.log('')
43 |     console.log(chalk.yellow('To use this template, you must update following to modules:'))
44 |     console.log()
45 | 
46 |     for (let i = 0; i < warnings.length; i++) {
47 |       const warning = warnings[i]
48 |       console.log('  ' + warning)
49 |     }
50 | 
51 |     console.log()
52 |     process.exit(1)
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/build/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weipxiu/Vue-Router/2e3e01d49f67cb390c8b8662e1d0ae0727edd62e/build/logo.png


--------------------------------------------------------------------------------
/build/utils.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | const path = require('path')
  3 | const config = require('../config')
  4 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
  5 | const packageConfig = require('../package.json')
  6 | 
  7 | exports.assetsPath = function (_path) {
  8 |   const assetsSubDirectory = process.env.NODE_ENV === 'production'
  9 |     ? config.build.assetsSubDirectory
 10 |     : config.dev.assetsSubDirectory
 11 | 
 12 |   return path.posix.join(assetsSubDirectory, _path)
 13 | }
 14 | 
 15 | exports.cssLoaders = function (options) {
 16 |   options = options || {}
 17 | 
 18 |   const cssLoader = {
 19 |     loader: 'css-loader',
 20 |     options: {
 21 |       sourceMap: options.sourceMap
 22 |     }
 23 |   }
 24 | 
 25 |   const postcssLoader = {
 26 |     loader: 'postcss-loader',
 27 |     options: {
 28 |       sourceMap: options.sourceMap
 29 |     }
 30 |   }
 31 | 
 32 |   // generate loader string to be used with extract text plugin
 33 |   function generateLoaders (loader, loaderOptions) {
 34 |     const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
 35 | 
 36 |     if (loader) {
 37 |       loaders.push({
 38 |         loader: loader + '-loader',
 39 |         options: Object.assign({}, loaderOptions, {
 40 |           sourceMap: options.sourceMap
 41 |         })
 42 |       })
 43 |     }
 44 | 
 45 |     // Extract CSS when that option is specified
 46 |     // (which is the case during production build)
 47 |     if (options.extract) {
 48 |       return ExtractTextPlugin.extract({
 49 |         use: loaders,
 50 |         fallback: 'vue-style-loader'
 51 |       })
 52 |     } else {
 53 |       return ['vue-style-loader'].concat(loaders)
 54 |     }
 55 |   }
 56 | 
 57 |   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
 58 |   return {
 59 |     css: generateLoaders(),
 60 |     postcss: generateLoaders(),
 61 |     less: generateLoaders('less'),
 62 |     sass: generateLoaders('sass', { indentedSyntax: true }),
 63 |     scss: generateLoaders('sass'),
 64 |     stylus: generateLoaders('stylus'),
 65 |     styl: generateLoaders('stylus')
 66 |   }
 67 | }
 68 | 
 69 | // Generate loaders for standalone style files (outside of .vue)
 70 | exports.styleLoaders = function (options) {
 71 |   const output = []
 72 |   const loaders = exports.cssLoaders(options)
 73 | 
 74 |   for (const extension in loaders) {
 75 |     const loader = loaders[extension]
 76 |     output.push({
 77 |       test: new RegExp('\\.' + extension + '$'),
 78 |       use: loader
 79 |     })
 80 |   }
 81 | 
 82 |   return output
 83 | }
 84 | 
 85 | exports.createNotifierCallback = () => {
 86 |   const notifier = require('node-notifier')
 87 | 
 88 |   return (severity, errors) => {
 89 |     if (severity !== 'error') return
 90 | 
 91 |     const error = errors[0]
 92 |     const filename = error.file && error.file.split('!').pop()
 93 | 
 94 |     notifier.notify({
 95 |       title: packageConfig.name,
 96 |       message: severity + ': ' + error.name,
 97 |       subtitle: filename || '',
 98 |       icon: path.join(__dirname, 'logo.png')
 99 |     })
100 |   }
101 | }
102 | 


--------------------------------------------------------------------------------
/build/vue-loader.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const utils = require('./utils')
 3 | const config = require('../config')
 4 | const isProduction = process.env.NODE_ENV === 'production'
 5 | const sourceMapEnabled = isProduction
 6 |   ? config.build.productionSourceMap
 7 |   : config.dev.cssSourceMap
 8 | 
 9 | module.exports = {
10 |   loaders: utils.cssLoaders({
11 |     sourceMap: sourceMapEnabled,
12 |     extract: isProduction
13 |   }),
14 |   cssSourceMap: sourceMapEnabled,
15 |   cacheBusting: config.dev.cacheBusting,
16 |   transformToRequire: {
17 |     video: ['src', 'poster'],
18 |     source: 'src',
19 |     img: 'src',
20 |     image: 'xlink:href'
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const path = require('path')
 3 | const utils = require('./utils')
 4 | const config = require('../config')
 5 | const vueLoaderConfig = require('./vue-loader.conf')
 6 | 
 7 | function resolve (dir) {
 8 |   return path.join(__dirname, '..', dir)
 9 | }
10 | 
11 | 
12 | 
13 | module.exports = {
14 |   context: path.resolve(__dirname, '../'),
15 |   entry: {
16 |     app: './src/main.js'
17 |   },
18 |   output: {
19 |     path: config.build.assetsRoot,
20 |     filename: '[name].js',
21 |     publicPath: process.env.NODE_ENV === 'production'
22 |       ? config.build.assetsPublicPath
23 |       : config.dev.assetsPublicPath
24 |   },
25 |   resolve: {
26 |     extensions: ['.js', '.vue', '.json', '.css'],
27 |     alias: {
28 |       'vue$': 'vue/dist/vue.esm.js',
29 |       '@': resolve('src'),
30 |     }
31 |   },
32 |   module: {
33 |     rules: [
34 |       {
35 |         test: /\.vue$/,
36 |         loader: 'vue-loader',
37 |         options: vueLoaderConfig
38 |       },
39 |       {
40 |         test: /\.js$/,
41 |         loader: 'babel-loader',
42 |         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
43 |       },
44 |       {
45 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
46 |         loader: 'url-loader',
47 |         options: {
48 |           limit: 10000,
49 |           name: utils.assetsPath('img/[name].[hash:7].[ext]')
50 |         }
51 |       },
52 |       {
53 |         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
54 |         loader: 'url-loader',
55 |         options: {
56 |           limit: 10000,
57 |           name: utils.assetsPath('media/[name].[hash:7].[ext]')
58 |         }
59 |       },
60 |       {
61 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
62 |         loader: 'url-loader',
63 |         options: {
64 |           limit: 10000,
65 |           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
66 |         }
67 |       }
68 |     ]
69 |   },
70 |   node: {
71 |     // prevent webpack from injecting useless setImmediate polyfill because Vue
72 |     // source contains it (although only uses it if it's native).
73 |     setImmediate: false,
74 |     // prevent webpack from injecting mocks to Node native modules
75 |     // that does not make sense for the client
76 |     dgram: 'empty',
77 |     fs: 'empty',
78 |     net: 'empty',
79 |     tls: 'empty',
80 |     child_process: 'empty'
81 |   }
82 | }
83 | 


--------------------------------------------------------------------------------
/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const utils = require('./utils')
 3 | const webpack = require('webpack')
 4 | const config = require('../config')
 5 | const merge = require('webpack-merge')
 6 | const path = require('path')
 7 | const baseWebpackConfig = require('./webpack.base.conf')
 8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
 9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
11 | const portfinder = require('portfinder')
12 | 
13 | const HOST = process.env.HOST
14 | const PORT = process.env.PORT && Number(process.env.PORT)
15 | 
16 | const devWebpackConfig = merge(baseWebpackConfig, {
17 |   module: {
18 |     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
19 |   },
20 |   // cheap-module-eval-source-map is faster for development
21 |   devtool: config.dev.devtool,
22 | 
23 |   // these devServer options should be customized in /config/index.js
24 |   devServer: {
25 |     clientLogLevel: 'warning',
26 |     historyApiFallback: {
27 |       rewrites: [
28 |         { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
29 |       ],
30 |     },
31 |     hot: true,
32 |     contentBase: false, // since we use CopyWebpackPlugin.
33 |     compress: true,
34 |     host: HOST || config.dev.host,
35 |     port: PORT || config.dev.port,
36 |     open: config.dev.autoOpenBrowser,
37 |     overlay: config.dev.errorOverlay
38 |       ? { warnings: false, errors: true }
39 |       : false,
40 |     publicPath: config.dev.assetsPublicPath,
41 |     proxy: config.dev.proxyTable,
42 |     quiet: true, // necessary for FriendlyErrorsPlugin
43 |     watchOptions: {
44 |       poll: config.dev.poll,
45 |     }
46 |   },
47 |   plugins: [
48 |     new webpack.DefinePlugin({
49 |       'process.env': require('../config/dev.env')
50 |     }),
51 |     new webpack.HotModuleReplacementPlugin(),
52 |     new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
53 |     new webpack.NoEmitOnErrorsPlugin(),
54 |     // https://github.com/ampedandwired/html-webpack-plugin
55 |     new HtmlWebpackPlugin({
56 |       filename: 'index.html',
57 |       template: 'index.html',
58 |       inject: true
59 |     }),
60 |     // copy custom static assets
61 |     new CopyWebpackPlugin([
62 |       {
63 |         from: path.resolve(__dirname, '../static'),
64 |         to: config.dev.assetsSubDirectory,
65 |         ignore: ['.*']
66 |       }
67 |     ])
68 |   ]
69 | })
70 | 
71 | module.exports = new Promise((resolve, reject) => {
72 |   portfinder.basePort = process.env.PORT || config.dev.port
73 |   portfinder.getPort((err, port) => {
74 |     if (err) {
75 |       reject(err)
76 |     } else {
77 |       // publish the new Port, necessary for e2e tests
78 |       process.env.PORT = port
79 |       // add port to devServer config
80 |       devWebpackConfig.devServer.port = port
81 | 
82 |       // Add FriendlyErrorsPlugin
83 |       devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
84 |         compilationSuccessInfo: {
85 |           messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
86 |         },
87 |         onErrors: config.dev.notifyOnErrors
88 |         ? utils.createNotifierCallback()
89 |         : undefined
90 |       }))
91 | 
92 |       resolve(devWebpackConfig)
93 |     }
94 |   })
95 | })
96 | 


--------------------------------------------------------------------------------
/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | const path = require('path')
  3 | const utils = require('./utils')
  4 | const webpack = require('webpack')
  5 | const config = require('../config')
  6 | const merge = require('webpack-merge')
  7 | const baseWebpackConfig = require('./webpack.base.conf')
  8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
  9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 13 | 
 14 | const env = require('../config/prod.env')
 15 | 
 16 | const webpackConfig = merge(baseWebpackConfig, {
 17 |   module: {
 18 |     rules: utils.styleLoaders({
 19 |       sourceMap: config.build.productionSourceMap,
 20 |       extract: true,
 21 |       usePostCSS: true
 22 |     })
 23 |   },
 24 |   devtool: config.build.productionSourceMap ? config.build.devtool : false,
 25 |   output: {
 26 |     path: config.build.assetsRoot,
 27 |     filename: utils.assetsPath('js/[name].[chunkhash].js'),
 28 |     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 29 |   },
 30 |   plugins: [
 31 |     // http://vuejs.github.io/vue-loader/en/workflow/production.html
 32 |     new webpack.DefinePlugin({
 33 |       'process.env': env
 34 |     }),
 35 |     new UglifyJsPlugin({
 36 |       uglifyOptions: {
 37 |         compress: {
 38 |           warnings: false
 39 |         }
 40 |       },
 41 |       sourceMap: config.build.productionSourceMap,
 42 |       parallel: true
 43 |     }),
 44 |     // extract css into its own file
 45 |     new ExtractTextPlugin({
 46 |       filename: utils.assetsPath('css/[name].[contenthash].css'),
 47 |       // Setting the following option to `false` will not extract CSS from codesplit chunks.
 48 |       // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
 49 |       // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
 50 |       // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
 51 |       allChunks: true,
 52 |     }),
 53 |     // Compress extracted CSS. We are using this plugin so that possible
 54 |     // duplicated CSS from different components can be deduped.
 55 |     new OptimizeCSSPlugin({
 56 |       cssProcessorOptions: config.build.productionSourceMap
 57 |         ? { safe: true, map: { inline: false } }
 58 |         : { safe: true }
 59 |     }),
 60 |     // generate dist index.html with correct asset hash for caching.
 61 |     // you can customize output by editing /index.html
 62 |     // see https://github.com/ampedandwired/html-webpack-plugin
 63 |     new HtmlWebpackPlugin({
 64 |       filename: config.build.index,
 65 |       template: 'index.html',
 66 |       inject: true,
 67 |       minify: {
 68 |         removeComments: true,
 69 |         collapseWhitespace: true,
 70 |         removeAttributeQuotes: true
 71 |         // more options:
 72 |         // https://github.com/kangax/html-minifier#options-quick-reference
 73 |       },
 74 |       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 75 |       chunksSortMode: 'dependency'
 76 |     }),
 77 |     // keep module.id stable when vendor modules does not change
 78 |     new webpack.HashedModuleIdsPlugin(),
 79 |     // enable scope hoisting
 80 |     new webpack.optimize.ModuleConcatenationPlugin(),
 81 |     // split vendor js into its own file
 82 |     new webpack.optimize.CommonsChunkPlugin({
 83 |       name: 'vendor',
 84 |       minChunks (module) {
 85 |         // any required modules inside node_modules are extracted to vendor
 86 |         return (
 87 |           module.resource &&
 88 |           /\.js$/.test(module.resource) &&
 89 |           module.resource.indexOf(
 90 |             path.join(__dirname, '../node_modules')
 91 |           ) === 0
 92 |         )
 93 |       }
 94 |     }),
 95 |     // extract webpack runtime and module manifest to its own file in order to
 96 |     // prevent vendor hash from being updated whenever app bundle is updated
 97 |     new webpack.optimize.CommonsChunkPlugin({
 98 |       name: 'manifest',
 99 |       minChunks: Infinity
100 |     }),
101 |     // This instance extracts shared chunks from code splitted chunks and bundles them
102 |     // in a separate chunk, similar to the vendor chunk
103 |     // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
104 |     new webpack.optimize.CommonsChunkPlugin({
105 |       name: 'app',
106 |       async: 'vendor-async',
107 |       children: true,
108 |       minChunks: 3
109 |     }),
110 | 
111 |     // copy custom static assets
112 |     new CopyWebpackPlugin([
113 |       {
114 |         from: path.resolve(__dirname, '../static'),
115 |         to: config.build.assetsSubDirectory,
116 |         ignore: ['.*']
117 |       }
118 |     ])
119 |   ]
120 | })
121 | 
122 | if (config.build.productionGzip) {
123 |   const CompressionWebpackPlugin = require('compression-webpack-plugin')
124 | 
125 |   webpackConfig.plugins.push(
126 |     new CompressionWebpackPlugin({
127 |       asset: '[path].gz[query]',
128 |       algorithm: 'gzip',
129 |       test: new RegExp(
130 |         '\\.(' +
131 |         config.build.productionGzipExtensions.join('|') +
132 |         ')$'
133 |       ),
134 |       threshold: 10240,
135 |       minRatio: 0.8
136 |     })
137 |   )
138 | }
139 | 
140 | if (config.build.bundleAnalyzerReport) {
141 |   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
142 |   webpackConfig.plugins.push(new BundleAnalyzerPlugin())
143 | }
144 | 
145 | module.exports = webpackConfig
146 | 


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 | 
5 | module.exports = merge(prodEnv, {
6 |   NODE_ENV: '"development"'
7 | })
8 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.3.1
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     proxyTable: {},
14 | 
15 |     // Various Dev Server settings
16 |     host: 'localhost', // can be overwritten by process.env.HOST
17 |     port: 1234, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 |     autoOpenBrowser: false,
19 |     errorOverlay: true,
20 |     notifyOnErrors: true,
21 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 | 
23 | 
24 |     /**
25 |      * Source Maps
26 |      */
27 | 
28 |     // https://webpack.js.org/configuration/devtool/#development
29 |     devtool: 'cheap-module-eval-source-map',
30 | 
31 |     // If you have problems debugging vue-files in devtools,
32 |     // set this to false - it *may* help
33 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
34 |     cacheBusting: true,
35 | 
36 |     cssSourceMap: true
37 |   },
38 | 
39 |   build: {
40 |     // Template for index.html
41 |     index: path.resolve(__dirname, '../dist/index.html'),
42 | 
43 |     // Paths
44 |     assetsRoot: path.resolve(__dirname, '../dist'),
45 |     assetsSubDirectory: 'static',
46 |     assetsPublicPath: './',
47 | 
48 |     /**
49 |      * Source Maps
50 |      */
51 | 
52 |     productionSourceMap: true,
53 |     // https://webpack.js.org/configuration/devtool/#production
54 |     devtool: '#source-map',
55 | 
56 |     // Gzip off by default as many popular static hosts such as
57 |     // Surge or Netlify already gzip all static assets for you.
58 |     // Before setting to `true`, make sure to:
59 |     // npm install --save-dev compression-webpack-plugin
60 |     productionGzip: false,
61 |     productionGzipExtensions: ['js', 'css'],
62 | 
63 |     // Run the build command with an extra argument to
64 |     // View the bundle analyzer report after build finishes:
65 |     // `npm run build --report`
66 |     // Set to `true` or `false` to always turn it on or off
67 |     bundleAnalyzerReport: process.env.npm_config_report
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <link rel="shortcut icon" type="image/x-icon" href="https://www.weipxiu.com/wp-content/uploads/2019/06/favicon.ico">
 7 |     <title></title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <!-- built files will be auto injected -->
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-demo",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "lijun <30607580@qq.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9 |     "start": "npm run dev",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "element-ui": "^2.15.6",
14 |     "moment": "^2.24.0",
15 |     "sortablejs": "^1.14.0",
16 |     "vue": "^2.5.2",
17 |     "vue-router": "^3.0.1"
18 |   },
19 |   "devDependencies": {
20 |     "autoprefixer": "^7.1.2",
21 |     "babel-core": "^6.22.1",
22 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
23 |     "babel-loader": "^7.1.1",
24 |     "babel-plugin-syntax-jsx": "^6.18.0",
25 |     "babel-plugin-transform-runtime": "^6.22.0",
26 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
27 |     "babel-preset-env": "^1.3.2",
28 |     "babel-preset-stage-2": "^6.22.0",
29 |     "chalk": "^2.0.1",
30 |     "copy-webpack-plugin": "^4.0.1",
31 |     "css-loader": "^0.28.0",
32 |     "extract-text-webpack-plugin": "^3.0.0",
33 |     "file-loader": "^1.1.4",
34 |     "friendly-errors-webpack-plugin": "^1.6.1",
35 |     "html-webpack-plugin": "^2.30.1",
36 |     "node-notifier": "^5.1.2",
37 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
38 |     "ora": "^1.2.0",
39 |     "portfinder": "^1.0.13",
40 |     "postcss-import": "^11.0.0",
41 |     "postcss-loader": "^2.0.8",
42 |     "postcss-url": "^7.2.1",
43 |     "rimraf": "^2.6.0",
44 |     "semver": "^5.3.0",
45 |     "shelljs": "^0.7.6",
46 |     "uglifyjs-webpack-plugin": "^1.1.1",
47 |     "url-loader": "^0.5.8",
48 |     "vue-loader": "^13.3.0",
49 |     "vue-style-loader": "^3.0.1",
50 |     "vue-template-compiler": "^2.5.2",
51 |     "webpack": "^3.6.0",
52 |     "webpack-bundle-analyzer": "^2.9.0",
53 |     "webpack-dev-server": "^2.9.1",
54 |     "webpack-merge": "^4.1.0"
55 |   },
56 |   "engines": {
57 |     "node": ">= 6.0.0",
58 |     "npm": ">= 3.0.0"
59 |   },
60 |   "browserslist": [
61 |     "> 1%",
62 |     "last 2 versions",
63 |     "not ie <= 8"
64 |   ]
65 | }
66 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <ul class="nav">
  4 |       <!-- <li><router-link to='/home'>我是首页</router-link></li> -->
  5 |       <li>
  6 |         <router-link to='/' exact tag="span" event='mouseover' active-class='span-active'><i></i>Home</router-link>
  7 |       </li>
  8 |       <li>
  9 |         <router-link to='/about' event='mouseover'>About</router-link>
 10 |       </li>
 11 |       <li>
 12 |         <router-link :to="{path:'/document'}" exact event='mouseover'>Document</router-link>
 13 |       </li>
 14 |       <li>
 15 |         <router-link :to="{path:'/leaving'}" exact event='mouseover'>Leaving</router-link>
 16 |       </li>
 17 |       <li>
 18 |         <router-link to='/undefined' exact event='mouseover'>Undefined</router-link>
 19 |       </li>
 20 |       <li>
 21 |         <router-link to='/user' event='mouseover'>User</router-link>
 22 |       </li>
 23 |     </ul>
 24 | 
 25 |     <transition>
 26 |       <router-view name="slide"></router-view>
 27 |     </transition>
 28 | 
 29 |     <!-- 运动模式out-in/in-out -->
 30 |     <!-- <transition name="left" mode="out-in">
 31 |       <router-view class="router-view"></router-view>
 32 |     </transition> -->
 33 | 
 34 |     <transition name="left">
 35 |       <router-view class="router-view"></router-view>
 36 |     </transition>
 37 | 
 38 |   </div>
 39 | </template>
 40 | 
 41 | <script>
 42 | import HelloWorld from './components/HelloWorld'
 43 | import moment from 'moment'
 44 | export default {
 45 |   data() {
 46 |     return {
 47 |       index: '/home',
 48 |       time:moment().format()
 49 |     }
 50 |   },
 51 |   name: 'App',
 52 |   components: {
 53 |     HelloWorld //注册组件名称首字母大写
 54 |   }
 55 | }
 56 | </script>
 57 | 
 58 | <style>
 59 | * {
 60 |   margin: 0;
 61 |   padding: 0;
 62 | }
 63 | h1,
 64 | h2 {
 65 |   margin: 25px 0;
 66 | }
 67 | 
 68 | #app {
 69 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
 70 |   -webkit-font-smoothing: antialiased;
 71 |   -moz-osx-font-smoothing: grayscale;
 72 |   text-align: center;
 73 |   color: #2c3e50;
 74 |   margin-top: 60px;
 75 | }
 76 | .nav {
 77 |   margin: 30px 0;
 78 | }
 79 | ul.nav li {
 80 |   display: inline-block;
 81 | }
 82 | ul.nav li a,
 83 | ul.nav li span {
 84 |   font-size: 14px;
 85 |   color: #fff;
 86 |   padding: 5px 10px;
 87 |   border-radius: 2px;
 88 |   background: rgb(156, 238, 63);
 89 |   text-decoration: none;
 90 | }
 91 | ul.nav li span.span-active {
 92 |   background: #e62a91;
 93 | }
 94 | ul.nav .action {
 95 |   background: rgb(38, 219, 113);
 96 | }
 97 | .router-view {
 98 |   width: 100%;
 99 |   position: absolute;
100 |   left: 0;
101 |   top: 100px;
102 | }
103 | /*路由组件进出场动画效果start*/
104 | .v-enter {
105 |   opacity: 0;
106 | }
107 | .v-enter-to {
108 |   opacity: 1;
109 | }
110 | .v-enter-active {
111 |   transition: 1s;
112 | }
113 | .v-leave {
114 |   opacity: 1;
115 | }
116 | .v-leave-to {
117 |   opacity: 0;
118 | }
119 | .v-leave-active {
120 |   transition: 0.7s;
121 | }
122 | /*路由组件进出场动画效果end*/
123 | 
124 | /*自定义的组件动画方式start*/
125 | /*注意，在自定义动画时候的class只能修改v-，后面的不可以修改*/
126 | .left-enter {
127 |   transform: translateX(100%);
128 | }
129 | .left-enter-to {
130 |   transform: translateX(0%);
131 | }
132 | .left-enter-active,
133 | .left-leave-active {
134 |   transition: 1s;
135 | }
136 | .left-leave {
137 |   transform: translateX(0);
138 | }
139 | .left-leave-to {
140 |   transform: translateX(-100%);
141 | }
142 | /*自定义的组件动画方式end*/
143 | </style>
144 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weipxiu/Vue-Router/2e3e01d49f67cb390c8b8662e1d0ae0727edd62e/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template comments>
 2 |   <div>
 3 |     <!-- 这是一段注释 -->
 4 |     <h1>{{ msg }}</h1>
 5 |     <h2 @click="methods($event)">{{ msg1 }}</h2>
 6 |     <h2 @click="onHander">首页Home</h2>
 7 |     <p>当前动态路由，所渲染的router-link最终为span标签</p>
 8 |     <!--[if mso]> 这是一段注释 <![endif]-->
 9 |     <p style="color:#e62a91">给当前span特殊的高亮颜色，只要你想要的，我都可以给你，路由就是能配成一朵花儿来展示</p>
10 |     <div v-for="(item,index) in new_obj" :key="index">
11 |       {{ item }}
12 |     </div>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   name: 'HelloWorld',
19 |   comments: true,
20 |   data() {
21 |     return {
22 |       msg: '欢迎来到vue的世界！',
23 |       msg1:'我是一坨字符串',
24 |       new_obj:{100:'a',2:'b',7:'c'}
25 |     }
26 |   },
27 |   created () {
28 |     ;
29 |   },
30 |   methods: {
31 |     onHander() {
32 |       let routeData = this.$router.resolve({
33 |         name: "/Details",
34 |         query: { goodsSn: '00' },
35 |         params: { goodsSn: '00' }
36 |       });
37 |       console.log(routeData)
38 |       window.open(routeData.resolved.name + routeData.href.substring(1), '_blank');
39 |     },
40 |     methods(e) {
41 |       console.log(e.currentTarget)
42 |         this.msg='123321'
43 |     }
44 |   },
45 |   watch:{
46 |     msg: (val, oldVal)=>{
47 |       console.log('打印',this)
48 |     }
49 |   },
50 |   mounted(){
51 |     console.log('vue根实例',this.$router.options.routes)
52 |   },
53 |   beforeRouteEnter(to, from, next) {
54 |     //console.log('通过组件内部判断到当前访问Home页面，放行、通过！')
55 |     //next();
56 |     //问题：项目场景，在执行beforeRouteEnter后改变数据data里面值？
57 |     //重点：beforeRouteEnter钩子比beforCreate都要更早执行，因此我们是不能通过this.msg拿到当前deta值
58 |     //解决方案：next回调函数
59 |     next((vm) => {
60 |       vm.msg = "欢迎访问我的路由案例，我是在beforeRouteEnter执行后改变过的数据！"
61 |     })
62 |   },
63 |   beforRouteUpdata(to, from, next) {
64 |     next();
65 |     //这个钩子函数主要是针对主导航下的二级导航，也就是说我们之前那么钩子函数都是针对主导航来进行设置，这个是针对二级导航
66 |   },
67 |   beforRouteLeave(to, from, next) {
68 |     next();
69 |     //离开时时候执行钩子函数，如果设置next(false)，那么组件就一直停留在当前路由组件，无法进入其他任何路由组件
70 |   }
71 | }
72 | </script>
73 | 
74 | <!-- Add "scoped" attribute to limit CSS to this component only -->
75 | <style scoped>
76 | body {
77 |   height: 5000px;
78 | }
79 | h1,
80 | h2 {
81 |   font-weight: normal;
82 | }
83 | ul {
84 |   list-style-type: none;
85 |   padding: 0;
86 | }
87 | li {
88 |   display: inline-block;
89 |   margin: 0 10px;
90 | }
91 | a {
92 |   color: #42b983;
93 | }
94 | p {
95 |   margin-top: 25px;
96 | }
97 | </style>
98 | 


--------------------------------------------------------------------------------
/src/components/about.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     {{time}}
 4 |     <h1>{{ aaa }}</h1>
 5 |     <h2>当前绑定是固定路由</h2>
 6 |     <hr>
 7 |     <h2>嗦嘎，二级嵌套路由来袭了！！！</h2>
 8 |     <ul class="nav">
 9 |        <!-- <router-link to='/about' exact tag="li">study</router-link>   
10 |        <router-link :to="{path:'/about/work'}" exact tag="li">work</router-link>   
11 |        <router-link to='/about/hobby' exact tag="li">hobby</router-link> -->
12 |        <!-- 命名视图，通过name别名去匹配 -->
13 |        <!-- 路由里的name必须和export一模一样，不然keep-alived缓存会失效 -->
14 |        <router-link :to="{name:'About'}" exact tag="li">study</router-link>   
15 |        <router-link :to="{path:'/about/work'}" exact tag="li">work</router-link>   
16 |        <router-link :to="{name:'Hobby'}" exact tag="li">hobby</router-link>
17 |        <keep-alive>
18 |          <router-view></router-view>   
19 |         </keep-alive>
20 |     </ul>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 |   export default {
26 |     name: 'about',
27 |     data () {
28 |       return {
29 |         aaa: '关于about页面！',
30 |         time:this.moment().format('LL')
31 |       }
32 |     }
33 |   }
34 | </script>
35 | 
36 | <!-- Add "scoped" attribute to limit CSS to this component only -->
37 | <style scoped>
38 | h1, h2 {
39 |   font-weight: normal;
40 | }
41 | ul {
42 |   list-style-type: none;
43 |   padding: 0;
44 | }
45 | li {
46 |   display: inline-block;
47 |   margin: 0 10px;
48 | }
49 | a {
50 |   color: #42b983;
51 | }
52 | ul.nav li{
53 |   font-size:14px;
54 |   color:#fff;
55 |   padding:5px 10px;
56 |   border-radius: 2px;
57 |   background: rgb(156, 238, 63);
58 |   text-decoration: none;
59 |   cursor: pointer;
60 | }
61 | ul.nav .action{
62 |   background: rgb(38, 219, 113)
63 | }
64 | </style>
65 | 


--------------------------------------------------------------------------------
/src/components/about_child/hobby.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>我是二级子路由hobby</h2>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     name: 'hobby',
10 |     data () {
11 |       return {
12 |       }
13 |     }
14 |   }
15 | </script>
16 | 
17 | <!-- Add "scoped" attribute to limit CSS to this component only -->
18 | <style scoped>
19 | h1, h2 {
20 |   font-weight: normal;
21 | }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/src/components/about_child/study.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>我是二级子路由study</h2>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     name: 'study',
10 |     data () {
11 |       return {
12 |       }
13 |     }
14 |   }
15 | </script>
16 | 
17 | <!-- Add "scoped" attribute to limit CSS to this component only -->
18 | <style scoped>
19 | h1, h2 {
20 |   font-weight: normal;
21 | }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/src/components/about_child/work.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>我是二级子路由work</h2>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |   export default {
 9 |     name: 'work',
10 |     data () {
11 |       return {
12 |       }
13 |     }
14 |   }
15 | </script>
16 | 
17 | <!-- Add "scoped" attribute to limit CSS to this component only -->
18 | <style scoped>
19 | h1, h2 {
20 |   font-weight: normal;
21 | }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/src/components/document.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="document">
 3 |     <h1>{{ bbb }}</h1>
 4 |     <p>当前绑定是动态路由，使用方式则为对象，所渲染的router-link为默认a标签</p>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |   export default {
10 |     name: 'document',
11 |     data () {
12 |       return {
13 |         bbb: '当前页面document'
14 |       }
15 |     }
16 |   }
17 | </script>
18 | 
19 | <!-- Add "scoped" attribute to limit CSS to this component only -->
20 | <style scoped>
21 | h1, h2 {
22 |   font-weight: normal;
23 | }
24 | ul {
25 |   list-style-type: none;
26 |   padding: 0;
27 | }
28 | li {
29 |   display: inline-block;
30 |   margin: 0 10px;
31 | }
32 | a {
33 |   color: #42b983;
34 | }
35 | .document{
36 |   float: right
37 | }
38 | </style>
39 | 


--------------------------------------------------------------------------------
/src/components/document_slide.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="slide">
 3 |     <h1>{{ bbb }}</h1>
 4 |     <p>当前页面渲染两个组件到一个路由地址展示！</p>
 5 |     <h2>我是另一个组件</h2>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 |   export default {
11 |     name: 'slide',
12 |     data () {
13 |       return {
14 |         bbb: '当前页面document侧边栏'
15 |       }
16 |     }
17 |   }
18 | </script>
19 | 
20 | <!-- Add "scoped" attribute to limit CSS to this component only -->
21 | <style scoped>
22 | h1, h2 {
23 |   font-weight: normal;
24 | }
25 | ul {
26 |   list-style-type: none;
27 |   padding: 0;
28 | }
29 | li {
30 |   display: inline-block;
31 |   margin: 0 10px;
32 | }
33 | a {
34 |   color: #42b983;
35 | }
36 | .slide{
37 |   width:300px;
38 |   border-right:1px solid #ccc;
39 |   height:1000px;
40 |   float: left;
41 | }
42 | </style>
43 | 


--------------------------------------------------------------------------------
/src/components/leaving.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="Leaving">
 3 |     <h2>当前页面Leaving</h2>
 4 |     <p>当前绑定是固定路由</p>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |   export default {
10 |     name: 'HelloWorld',
11 |     data () {
12 |       return {
13 |         msg: 'Leaving'
14 |       }
15 |     }
16 |   }
17 | </script>
18 | 
19 | <!-- Add "scoped" attribute to limit CSS to this component only -->
20 | <style scoped>
21 | h1, h2 {
22 |   font-weight: normal;
23 | }
24 | ul {
25 |   list-style-type: none;
26 |   padding: 0;
27 | }
28 | li {
29 |   display: inline-block;
30 |   margin: 0 10px;
31 | }
32 | a {
33 |   color: #42b983;
34 | }
35 | p{
36 |   margin-top:25px;
37 | }
38 | </style>
39 | 


--------------------------------------------------------------------------------
/src/components/tuozhuai/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div style="width:800px">
  3 |     <h2>拖拽测试</h2>
  4 |     <el-table :data="tableData"
  5 |       border
  6 |       row-key="id"
  7 |       align="left">
  8 |      <el-table-column v-for="(item, index) in col"
  9 |         :key="`col_${index}`"
 10 |         :prop="dropCol[index].prop"
 11 |         :label="item.label">
 12 |       </el-table-column>
 13 |     </el-table>
 14 |     <pre style="text-align: left">
 15 |       {{dropCol}}
 16 |     </pre>
 17 |     <hr>
 18 |     <pre style="text-align: left">
 19 |       {{tableData}}
 20 |     </pre>
 21 |   </div>
 22 | </template>
 23 | <script>
 24 | import Sortable from 'sortablejs'
 25 | export default {
 26 |   data() {
 27 |     return {
 28 |       col: [
 29 |         {
 30 |           label: '日期',
 31 |           prop: 'date'
 32 |         },
 33 |         {
 34 |           label: '姓名',
 35 |           prop: 'name'
 36 |         },
 37 |         {
 38 |           label: '地址',
 39 |           prop: 'address'
 40 |         }
 41 |       ],
 42 |       dropCol: [
 43 |         {
 44 |           label: '日期',
 45 |           prop: 'date'
 46 |         },
 47 |         {
 48 |           label: '姓名',
 49 |           prop: 'name'
 50 |         },
 51 |         {
 52 |           label: '地址',
 53 |           prop: 'address'
 54 |         }
 55 |       ],
 56 |       tableData: [
 57 |         {
 58 |           id: '1',
 59 |           date: '2016-05-02',
 60 |           name: '王小虎1',
 61 |           address: '上海市普陀区金沙江路 100 弄'
 62 |         },
 63 |         {
 64 |           id: '2',
 65 |           date: '2016-05-04',
 66 |           name: '王小虎2',
 67 |           address: '上海市普陀区金沙江路 200 弄'
 68 |         },
 69 |         {
 70 |           id: '3',
 71 |           date: '2016-05-01',
 72 |           name: '王小虎3',
 73 |           address: '上海市普陀区金沙江路 300 弄'
 74 |         },
 75 |         {
 76 |           id: '4',
 77 |           date: '2016-05-03',
 78 |           name: '王小虎4',
 79 |           address: '上海市普陀区金沙江路 400 弄'
 80 |         }
 81 |       ]
 82 |     }
 83 |   },
 84 |   mounted() {
 85 |     this.rowDrop()
 86 |     this.columnDrop()
 87 |   },
 88 |   methods: {
 89 |     //行拖拽
 90 |     rowDrop() {
 91 |       const tbody = document.querySelector('.el-table__body-wrapper tbody')
 92 |       const _this = this
 93 |       Sortable.create(tbody, {
 94 |         onEnd({ newIndex, oldIndex }) {
 95 |           const currRow = _this.tableData.splice(oldIndex, 1)[0]
 96 |           _this.tableData.splice(newIndex, 0, currRow)
 97 |         }
 98 |       })
 99 |     },
100 |     //列拖拽
101 |     columnDrop() {
102 |       const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
103 |       this.sortable = Sortable.create(wrapperTr, {
104 |         animation: 180,
105 |         delay: 0,
106 |         onEnd: evt => {
107 |           const oldItem = this.dropCol[evt.oldIndex]
108 |           this.dropCol.splice(evt.oldIndex, 1)
109 |           this.dropCol.splice(evt.newIndex, 0, oldItem)
110 |         }
111 |       })
112 |     }
113 |   }
114 | }
115 | </script>
116 | <style scoped>
117 | </style>
118 | 


--------------------------------------------------------------------------------
/src/components/undefined.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>抱歉：404，你访问的路由页面不存在！</h2>
 4 |     <h2>你可以尝试在地址栏随便输入参数，看是否能正常重定向当前页面！</h2>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |   export default {
10 |     name: 'undefined',
11 |     data () {
12 |       return {
13 |         msg: 'undefined'
14 |       }
15 |     }
16 |   }
17 | </script>
18 | 
19 | <!-- Add "scoped" attribute to limit CSS to this component only -->
20 | <style scoped>
21 | h1, h2 {
22 |   font-weight: normal;
23 | }
24 | ul {
25 |   list-style-type: none;
26 |   padding: 0;
27 | }
28 | li {
29 |   display: inline-block;
30 |   margin: 0 10px;
31 | }
32 | a {
33 |   color: #42b983;
34 | }
35 | p{
36 |   margin-top:25px;
37 | }
38 | </style>
39 | 


--------------------------------------------------------------------------------
/src/components/user.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="user">
 3 |     <h2>当前页面user</h2>
 4 |     <p style="margin-bottom:35px">当前绑定是动态路由，通过地址栏传入不同的参数，而在user组件里展示不同的用户信息</p>
 5 |     <hr>
 6 |     <ul class="nav">
 7 |       <router-link :to="'/user/'+item.id" v-for="item in dataList" :key="item.id" tag="li">{{item.userName}}</router-link>
 8 |     </ul>
 9 |     <div v-if="userInfo.id">
10 |       <!--判断里面对象有木有，如果木有就不渲染了-->
11 |       <p>姓名：{{userInfo.userName}}</p>
12 |       <p>性别：{{userInfo.sex}}</p>
13 |       <p>爱好：{{userInfo.hobby}}</p>
14 |     </div>
15 |   </div>
16 | </template>
17 | <script>
18 | import userData from '@/data.js'
19 | export default {
20 |   name: 'user',
21 |   data() {
22 |     return {
23 |       dataList: userData,
24 |       userInfo: {}
25 |     }
26 |   },
27 |   watch: {
28 |     "$route": function () {
29 |       this.wacchList()
30 |     }
31 |   },
32 |   created() {
33 |     /*created只会在初始化时候执行一次，所以我们要将里面的代码抽离出来，
34 |     在watch里监听路由变化来执行相同代码做相同的事*/
35 |     this.wacchList()
36 |   },
37 |   methods: {
38 |     wacchList() {
39 |       let id = this.$route.params.xxx;
40 |       console.log(this.$route)//可以拿到当前路由对象的所有属性、参数
41 |       /*id：拿到动态路由$route.params对象信息,
42 |       注意，是$route而不是$router，xxx是在路由index.js文件里配置的自定义参数*/
43 |       if (!id) {
44 |         this.userInfo = {}
45 |         return
46 |       }
47 |       this.userInfo = this.dataList.filter((item) => {
48 |         return item.id == id;
49 |       })[0] //过滤后的数组
50 |       console.log(this.userInfo)
51 |     }
52 |   }
53 | }
54 | </script>
55 | 
56 | <!-- Add "scoped" attribute to limit CSS to this component only -->
57 | <style scoped>
58 | h1,
59 | h2 {
60 |   font-weight: normal;
61 | }
62 | ul {
63 |   list-style-type: none;
64 |   padding: 0;
65 | }
66 | li {
67 |   display: inline-block;
68 |   margin: 0 10px;
69 | }
70 | a {
71 |   color: #42b983;
72 | }
73 | p {
74 |   margin-top: 25px;
75 | }
76 | ul.nav li {
77 |   font-size: 14px;
78 |   color: #fff;
79 |   padding: 5px 10px;
80 |   border-radius: 2px;
81 |   background: rgb(156, 238, 63);
82 |   text-decoration: none;
83 |   cursor: pointer;
84 | }
85 | ul.nav .action {
86 |   background: rgb(38, 219, 113);
87 | }
88 | </style>
89 | 


--------------------------------------------------------------------------------
/src/data.js:
--------------------------------------------------------------------------------
 1 | let data = [
 2 |         {
 3 |             id:1,
 4 |             userName:"leo1",
 5 |             sex:'男',
 6 |             hobby:'写代码'
 7 |         },
 8 |         {
 9 |             id:2,
10 |             userName:"leo2",
11 |             sex:'男',
12 |             hobby:'唱歌'
13 |         },
14 |         {
15 |             id:3,
16 |             userName:"leo3",
17 |             sex:'男',
18 |             hobby:'读书'
19 |         }
20 |     ]
21 | export default data
22 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import ElementUI from 'element-ui';
 5 | import 'element-ui/lib/theme-chalk/index.css';
 6 | import App from './App'
 7 | import router from '@/router'
 8 | import moment from 'moment'
 9 | Vue.use(ElementUI);
10 | moment.locale('zh-cn');
11 | Vue.prototype.moment = moment;
12 | 
13 | Vue.config.productionTip = false
14 | 
15 | /* eslint-disable no-new */
16 | new Vue({
17 |   el: '#app',
18 |   router,
19 |   components: { App },
20 |   template: '<App/>'
21 | })
22 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import Router from 'vue-router'
  3 | import HelloWorld from '@/components/HelloWorld'
  4 | import about from '@/components/about'
  5 | import document from '@/components/document'
  6 | import slide from '@/components/document_slide'
  7 | import leaving  from '@/components/leaving'
  8 | import undefined  from '@/components/undefined'
  9 | import user  from '@/components/user'
 10 | import tuozhuai  from '@/components/tuozhuai'
 11 | 
 12 | import study  from '@/components/about_child/study'
 13 | import work  from '@/components/about_child/work'
 14 | import hobby  from '@/components/about_child/hobby'
 15 | 
 16 | 
 17 | Vue.use(Router)
 18 | 
 19 | let router = new Router({
 20 |   linkActiveClass :'action',
 21 |   scrollBehavior(to,from,savePosition){//滚动行为
 22 |     //console.log(to) //进入的目标对象
 23 |     //console.log(from) //离开的路由对象
 24 |     console.log(savePosition)//记录滚动路由坐标
 25 |     if(savePosition){
 26 |       return savePosition //针对鼠标点击浏览器前进后台，如果记录到坐标存在就返回出来之前坐标，
 27 |     }else{
 28 |       return{x:0,y:0} //否则都返回默认的（0,0）
 29 |     }
 30 |     //值得注意的是在谷歌浏览器上我发现即使不设置，好像也一样
 31 |   },
 32 |   mode:'history',
 33 |   base: '/dist/',
 34 |   routes: [
 35 |     {
 36 |       path: '/',
 37 |       component: HelloWorld,
 38 |       meta:{
 39 |         title:'Home-HelloWorld'
 40 |       }
 41 |     },
 42 |     {
 43 |       path: '/home',
 44 |       name: 'HelloWorld',
 45 |       component: HelloWorld,
 46 |       alias: '/abc',
 47 |       /*设置alias可以在访问路由为'/abc'重定向时候路由地址不会跳转，依然为abc，也就是别名，
 48 |       通过abc地址渲染的还是home，请结合下面redirect重定向设置查看，但有必要注意的是，
 49 |       如果你使用这种方式，router-link的高亮就失效了，可以地址栏输入'abc'回车测试*/
 50 |       meta:{
 51 |         title:'Home-HelloWorld'
 52 |       }
 53 |     },
 54 |     {
 55 |       path: '/about',
 56 |       //name: 'about',
 57 |       //如果设置了子路由，那么name去掉，否则控制台会有警告，去掉的name应该给子路由的默认路由
 58 |       component: about,
 59 |       children:[
 60 |         {
 61 |           path: '', //默认子路由，值不要/，虽然测试时候发现这里带/并没什么问题
 62 |           name: 'About',//父级去掉的name
 63 |           component: study,
 64 |           meta:{
 65 |             title:'about'
 66 |           }
 67 |         },
 68 |         {
 69 |           path: 'work', // http://localhost:1234/about/work
 70 |           //注意，二级导航的path里面参数开头不能带/，否则会以根目录进行匹配
 71 |           name: 'Work',
 72 |           component: work
 73 |         },
 74 |         {
 75 |           path: '/hobby', // http://localhost:1234/hobby
 76 |           //注意，如果你想路由不进行嵌套，但组件关系进行嵌套，那么你需要设置name，在about组件里路由地址应该通过name别名进行设置
 77 |           name: 'Hobby',
 78 |           component: hobby
 79 |         }
 80 |       ]
 81 |     }
 82 |     ,
 83 |     {
 84 |       path: '/document',
 85 |       name: 'document',
 86 |       components: { //多个组件渲染到一个路由(命名视图技术)
 87 |         default:document, //默认渲染到router-view没有name的路由
 88 |         slide:slide
 89 |       },
 90 |       meta:{
 91 |         title:'document'
 92 |       },
 93 |       beforeEnter(to,from,next){ //局部路由钩子函数beforeEnter/afterEnter
 94 |         console.log("路由钩子函数监听到：进入到document组件")
 95 |         next(true)
 96 |       }
 97 |     },
 98 |     {
 99 |       path: '/leaving',
100 |       name: 'leaving',
101 |       component: leaving,
102 |       meta:{
103 |         title:'leaving'
104 |       }
105 |     },
106 |     {
107 |       path: '/undefined',
108 |       name: 'nofind',
109 |       component: undefined,
110 |       meta:{
111 |         login:true,
112 |         title:'undefined'
113 |       }
114 |     },
115 |     {
116 |       path: '/user/:xxx?',//:xxx?拿到路由router-link设置的参数
117 |       name: 'user',
118 |       component: user
119 |     },
120 |     {
121 |       path: '/tuozhuai',
122 |       name: 'tuozhuai',
123 |       component: tuozhuai
124 |     },
125 |     {
126 |       path: '*',
127 |       //component: undefined //第一种方式 - 直接去渲染404-undefined组件
128 | 
129 |       redirect: '/undefined'
130 |       /* 第二种方式redirect - 路由重定向,值得注意的是：当前这个undefined必须是你在上面配置过的地址
131 |          也就是说，重定向到达的页面必须是已经存在的路由，如果组件没在上面routes里面配置，直接去重定向一个组件是会报错
132 |       */
133 | 
134 |       //redirect:{path:'/undefined'}
135 |       //第三种方式，对象写法，同样，还是通过上面配置过的路由地址进行跳转，不是直接渲染组件方式
136 | 
137 |       //redirect:{name:'nofind'}
138 |       //第四种方式，对象通过name别名写法，同样，还是通过上面配置过的路由地址进行跳转，不是直接渲染组件方式
139 | 
140 |       // redirect:(to) => {//第四种方式：动态设置重定向目标
141 |       //   /*console.log(to) //to，目标路由对象，当前访问的目标路由信息
142 |       //   return '/undefined'//重定向到一个上面配置过的路由地址*/
143 | 
144 |       //   //当然，既然说是动态设置，那么肯定不能向上述那样简简单单return完事，如下：
145 |       //   if(to.path == '/abc'){
146 |       //     return '/home' //如果目标路径是abc，那么我重定向到首页home
147 |       //   }
148 |       //   return '/undefined' //其他正常时候跳转到404
149 |       // }
150 |     }
151 |   ]
152 | })
153 | 
154 | // 路由钩子函数
155 | //beforeEach即将要进某个路由时候
156 | router.beforeEach((to, from, next)=>{
157 |   console.log(from)
158 |   if(to.meta.login){
159 |     next(true) //false时候阻止路由执行，默认参数就是true
160 |     // next('/login') 在这里判断到后去跳到登录页面，先要在路由里配置，得有这个路由
161 |     console.log("当前是个404组件，需要登录访问，其实你还没有登录，不过看你可怜兮兮，我暂时让你旁观！")
162 |   }else{
163 |     next()
164 |   }
165 | })
166 | 
167 | // 判断是否登录
168 | // router.beforeEach((to, from, next)=>{
169 | //   if(!sessionStorage.getItem("username")){
170 | //     // 判断当前是否是登录页，如果是，那就进登录页安静待着，否则就跳转到登录页，该处如果不判断，那就会出现死循环，进入登录页前同样会走beforeEach钩子函数，如此往复页面就挂掉了
171 | //     if(to.path == '/login'){
172 | //       next()
173 | //     }else{
174 | //       next({path:'/login'})
175 | //     }
176 | //   }else{
177 | //     next()
178 | //   }
179 | // })
180 | 
181 | //afterEach进入组件之后，当然，就没有next了，已经进入了组件
182 | router.afterEach((to, from)=>{
183 |   if(to.meta.title){
184 |     //当进入了组件后，如果meta里有title就设置title(注意，这个位置document前面需要加上window才能访问)
185 |     window.document.title = to.meta.title;
186 |   }else{
187 |     window.document.title = '世上最完整的vue-router案例'
188 |   }
189 | })
190 | 
191 | export default router
192 | 


--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/weipxiu/Vue-Router/2e3e01d49f67cb390c8b8662e1d0ae0727edd62e/static/.gitkeep


--------------------------------------------------------------------------------