vue的路由配置是怎么配置的,有多少种方法?

发布网友发布时间：2022-04-23 07:26

我来回答

共0个回答

懂视网时间：2022-05-14 15:27

Vue路由就是指vue-router，其中router是指根据url分配到对应的处理程序，所以说路由就是用来解析URL以及调用对应的控制器并返回从视图对象中提取好的网页代码给web服务器，最终返回给客户端。

对于前端来说，浏览器配合超链接就可很好的实现路由功能，但是对于单页面来说，这种跳转方式已经不适用了。所有各大框架都出现了单页面应用解决路由跳转的问题，尤其是vue框架，接下来将在文章中详细的介绍Vue路由是什么意思，希望对大家有所帮助。

【推荐课程：Vue教程】

Vue路由

Vue路由即vue-router，在web开发中，“router”是指根据url分配到对应的处理程序。

在计算机网络原理中，路由指的是根据上一接口的数据包中的IP地址，查询路由表转发到另一个接口，它是决定一个端到端的网络路径。所以说路由就是用来解析URL以及调用对应的控制器的。

在web开发中，客户端的请求是以url的形式传递给服务器，它根据URL将请求分配到指定的一个端并且在这个过程中对其进行处理。然后路由再调用相关的控制器，控制器调用相关的服务，并返回视图对象。路由再从视图对象中提取生成好的网页代码返回给Web服务器，最终返回给客户端。

为什么要使用路由？

在传统的web开发中每一个请求地址都会请求服务器来进行处理，但是用户有些操作则无需请求服务器，直接页面端修改下逻辑就能达到目的，在这种方式下最好的方法是使用路由，因为使用路由时，URL会随着改变，用户浏览一个网页时可以直接复制或收藏当前页面的URL给别人，这种方式对于搜索引擎和用户来说都是友好的

总结：

懂视网时间：2022-05-14 18:50

本篇文章给大家带来的内容是关于详解vuejs的路由实现原理，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

一般源码中，都会用到 window.history 和 location.hash

history 实现

window.history 对象包含浏览器的历史，window.history 对象在编写时可不使用 window 这个前缀。history是实现SPA前端路由是一种主流方法，它有几个原始方法：

history.back()

与在浏览器点击后退按钮相同

history.forward()

与在浏览器中点击按钮向前相同

history.go(n)

接受一个整数作为参数，移动到该整数指定的页面，比如go(1)相当于forward()，go(-1)相当于back()，go(0)相当于刷新当前页面
如果移动的位置超出了访问历史的边界，以上三个方法并不报错，而是静默失败

在HTML5，history对象提出了 pushState() 方法和 replaceState() 方法，这两个方法可以用来向历史栈中添加数据，就好像 url 变化了一样（过去只有 url 变化历史栈才会变化），这样就可以很好的模拟浏览历史和前进后退了，现在的前端路由也是基于这个原理实现的。

history.pushState

pushState(stateObj, title, url) 方法向历史栈中写入数据，其第一个参数是要写入的数据对象（不大于640kB)，第二个参数是页面的 title, 第三个参数是 url (相对路径)。

stateObj ：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此* 处可以填null。
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
关于pushState，有几个值得注意的地方：

pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏会有反应,只有当触发前进后退等事件（back()和forward()等）时浏览器才会刷新
这里的 url 是受到同源策略限制的，防止恶意脚本模仿其他网站 url 用来欺骗用户，所以当违背同源策略时将会报错

history.replaceState

replaceState(stateObj, title, url) 和pushState的区别就在于它不是写入而是替换修改浏览历史中当前纪录，其余和 pushState一模一样。

popstate事件

定义：每当同一个文档的浏览历史（即history对象）出现变化时，就会触发popstate事件。
注意：仅仅调用pushState方法或replaceState方法，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用JavaScript调用back、forward、go方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。
用法：使用的时候，可以为popstate事件指定回调函数。这个回调函数的参数是一个event事件对象，它的state属性指向pushState和replaceState方法为当前URL所提供的状态对象（即这两个方法的第一个参数）。

HISTORY实现SPA前端路由代码

<a class="spa">abc.html</a>
<a class="spa">123.html</a>
<a href="/rdhub" class="spa ">rdhub</a>
 // 注册路由
 document.querySelectorAll('.spa').forEach(item => {
 item.addEventListener('click', e => {
 e.preventDefault();
 let link = item.textContent;
 if (!!(window.history && history.pushState)) {
 // 支持History API
 window.history.pushState({name: 'history'}, link, link);
 } else {
 // 不支持,可使用一些Polyfill库来实现
 }
 }, false)
 });

 // 监听路由
 window.addEventListener('popstate', e => {
 console.log({
 location: location.href,
 state: e.state
 })
 }, false)
popstate监听函数里打印的e.state便是history.pushState()里传入的第一个参数，在这里即为{name: 'history'}

hash

hash基本介绍

url 中可以带有一个 hash http://localhost:9000/#/rdhub.html

window 对象中有一个事件是 onhashchange，以下几种情况都会触发这个事件：

直接更改浏览器地址，在最后面增加或改变#hash；
通过改变location.href或location.hash的值；
通过触发点击带锚点的链接；
浏览器前进后退可能导致hash的变化，前提是两个网页地址中的hash值不同。

hash实现SPA前端路由代码

<a href="/rdhub" class="spa">rdhub</a>
<a href="/abc" class="spa">abc</a>
<a href="/123" class="spa">123</a>
<a href="/hash" class="spa">hash</a>
 document.querySelectorAll('.spa').forEach(item => {
 item.addEventListener('click', e => {
 e.preventDefault();
 let link = item.textContent;
 location.hash = link;
 }, false)
 });
 // 监听路由
 window.addEventListener('hashchange', e => {
 console.log({
 location: location.href,
 hash: location.hash
 })
 }, false)

hash模式与history模式，这两种模式都是通过浏览器接口实现的，除此之外vue-router还为非浏览器环境准备了一个abstract模式，其原理为用一个数组stack模拟出浏览器历史记录栈的功能。当然，以上只是一些核心逻辑，为保证系统的鲁棒性源码中还有大量的辅助逻辑，也很值得学习。

两种模式比较

pushState设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL

pushState设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发记录添加到栈中

pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串

pushState可额外设置title属性供后续使用

history模式的一个问题

我们知道对于单页应用来讲，理想的使用场景是仅在进入应用时加载index.html，后续在的网络操作通过Ajax完成，不会根据URL重新请求页面，但是难免遇到特殊情况，比如用户直接在地址栏中输入并回车，浏览器重启重新加载应用等。

hash模式仅改变hash部分的内容，而hash部分是不会包含在HTTP请求中的：

http://rdhub.cn/#/user/id // 如重新请求只会发送http://rdhub.cn/
故在hash模式下遇到根据URL请求页面的情况不会有问题。

而history模式则会将URL修改得就和正常请求后端的URL一样
http://rdhub.cn/user/id
在此情况下重新向后端发送请求，如后端没有配置对应/user/id的路由处理，则会返回404错误。

官方推荐的解决办法是在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。同时这么做以后，服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。或者，如果是用 Node.js 作后台，可以使用服务端的路由来匹配 URL，当没有匹配到路由的时候返回 404，从而实现 fallback。

懂视网时间：2022-05-14 20:29

本篇文章给大家带来的内容是关于vue.js路由显示设置的方法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

①设置 path 为 ‘/’

const router= new VueRouter({
 routes:[
 {path:'/',name:'home',component:Home},  //页面第一显示的组件
 {path:'/menu',name:'menu',component:Menu},
 {path:'*',redirect:'/'}
 ],
 mode:"history"
});

②设置 redirect 的值（适用于二级路由）

const router= new VueRouter({
 routes:[
 {path:'/',name:'home',component:Home},
 {path:'/about',name:'about',component:About,redirect:{name:'contactLink'},children:[ //二级路由
 {path:'/about/contact',name:'contactLink',component:Contact},
 {path:'/history',name:'historyLink',component:History},
 ]},
 {path:'*',redirect:'/'}
 ],
 mode:"history"
});

`build.assetsRoot`

必须是本地文件系统上的绝对路径。

应该指向包含应用程序的所有静态资产的根目录。public/ 对应Rails/Laravel。

`build.assetsSubDirectory`

被webpack编译处理过的资源文件都会在这个build.assetsRoot目录下，所以它不可以混有其它可能在build.assetsRoot里面有的文件。例如，假如build.assetsRoot参数是/path/to/dist，build.assetsSubDirectory 参数是 static, 那么所以webpack资源会被编译到path/to/dist/static目录。

每次编译前，这个目录会被清空，所以这个只能放编译出来的资源文件。

static/目录的文件会直接被在构建过程中，直接拷贝到这个目录。这意味着是如果你改变这个规则，所有你依赖于static/中文件的绝对地址，都需要改变。

`build.assetsPublicPath【资源的根目录】`

这个是通过http服务器运行的url路径。在大多数情况下，这个是根目录(/)。如果你的后台框架对静态资源url前缀要求，你仅需要改变这个参数。在内部，这个是被webpack当做output.publicPath来处理的。

后台有要求的话一般要加上./ 或者根据具体目录添加，不然引用不到静态资源

`build.productionSourceMap`

在构建生产环境版本时是否开启source map。

`dev.port`

开发服务器监听的特定端口

`dev.proxyTable`

定义开发服务器的代理规则。

项目中配置的config/index.js，有dev和production两种环境的配置以下介绍的是production环境下的webpack配置的理解

var path = require('path')
module.exports = {
 build: { // production 环境
 env: require('./prod.env'), // 使用 config/prod.env.js 中定义的编译环境
 index: path.resolve(__dirname, '../dist/index.html'), // 编译输入的 index.html 文件
 assetsRoot: path.resolve(__dirname, '../dist'), // 编译

输出的静态资源路径 assetsSubDirectory: 'static', // 编译输出的二级目录 assetsPublicPath: '/', // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名 productionSourceMap: true, // 是否开启 cssSourceMap // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: false, // 是否开启 gzip productionGzipExtensions: ['js', 'css'] // 需要使用 gzip 压缩的文件扩展名 }, dev: { // dev 环境 env: require('./dev.env'), // 使用 config/dev.env.js 中定义的编译环境 port: 8080, // 运行测试页面的端口 assetsSubDirectory: 'static', // 编译输出的二级目录 assetsPublicPath: '/', // 编译发布的根目录，可配置为资源服务器域名或 CDN 域名 proxyTable: {}, // 需要 proxyTable 代理的接口（可跨域） // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. cssSourceMap: false // 是否开启 cssSourceMap } }

下面是vue中的build/webpack.base.conf.js

//引入依赖模块
var path = require('path')
var config = require('../config') // 获取配置
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')
 
var env = process.env.NODE_ENV
// check env & config/index.js to decide weither to enable CSS Sourcemaps for the
// various preprocessor loaders added to vue-loader at the end of this file
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)/* 是否在 dev 环境下开启 cssSourceMap ，在 config/index.js 中可配置 */
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)/* 是否在 production 环境下开启 cssSourceMap ，在 config/index.js 中可配置 */
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd /* 最终是否使用 cssSourceMap */
 
module.exports = {
 entry: { // 配置webpack编译入口
 app: './src/main.js' 
 },
 output: { // 配置webpack

输出路径和命名规则 path: config.build.assetsRoot, // webpack输出的目标文件夹路径（例如：/dist） publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, // webpack编译输出的发布路径(判断是正式环境或者开发环境等) filename: '[name].js' // webpack输出bundle文件命名格式，基于文件的md5生成Hash名称的script来防止缓存 }, resolve: { extensions: ['', '.js', '.vue', '.scss'], //自动解析确定的拓展名,使导入模块时不带拓展名 fallback: [path.join(__dirname, '../node_modules')], alias: { // 创建import或require的别名，一些常用的，路径长的都可以用别名 'vue$': 'vue/dist/vue', 'src': path.resolve(__dirname, '../src'), 'assets': path.resolve(__dirname, '../src/assets'), 'components': path.resolve(__dirname, '../src/components'), 'scss_vars': path.resolve(__dirname, '../src/styles/vars.scss') } }, resolveLoader: { fallback: [path.join(__dirname, '../node_modules')] }, module: { loaders: [ { test: /.vue$/, // vue文件后缀 loader: 'vue' //使用vue-loader处理 }, { test: /.js$/, loader: 'babel', include: projectRoot, exclude: /node_modules/ }, { test: /.json$/, loader: 'json' }, { test: /.(png|jpe?g|gif|svg)(?.*)?$/, loader: 'url', query: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /.(woff2?|eot|ttf|otf)(?.*)?$/, loader: 'url', query: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] }, vue: { // .vue 文件配置 loader 及工具 (autoprefixer) loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }), //// 调用cssLoaders方法返回各类型的样式对象(css: loader) postcss: [ require('autoprefixer')({ browsers: ['last 2 versions'] }) ] } }

webpack.prod.conf.js 生产环境下的配置文件

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var webpack = require('webpack')
var merge = require('webpack-merge')// 一个可以合并数组和对象的插件
var baseWebpackConfig = require('./webpack.base.conf')
// 用于从webpack生成的bundle中提取文本到特定文件中的插件
// 可以抽取出css，js文件将其与webpack

输出的bundle分离 var ExtractTextPlugin = require('extract-text-webpack-plugin') //如果我们想用webpack打包成一个文件，css js分离开，需要这个插件 var HtmlWebpackPlugin = require('html-webpack-plugin')// 一个用于生成HTML文件并自动注入依赖文件（link/script）的webpack插件 var env = config.build.env // 合并基础的webpack配置 var webpackConfig = merge(baseWebpackConfig, { // 配置样式文件的处理规则，使用styleLoaders module: { loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) }, devtool: config.build.productionSourceMap ? '#source-map' : false, // 开启source-map，生产环境下推荐使用cheap-source-map或source-map，后者得到的.map文件体积比较大，但是能够完全还原以前的js代码 output: { path: config.build.assetsRoot,// 编译输出目录 filename: utils.assetsPath('js/[name].[chunkhash].js'), // 编译输出文件名格式 chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') // 没有指定输出名的文件输出的文件名格式 }, vue: { // vue里的css也要单独提取出来 loaders: utils.cssLoaders({ // css加载器，调用了utils文件中的cssLoaders方法,用来返回针对各类型的样式文件的处理方式, sourceMap: config.build.productionSourceMap, extract: true }) }, // 重新配置插件项 plugins: [ // http://vuejs.github.io/vue-loader/en/workflow/production.html // 位于开发环境下 new webpack.DefinePlugin({ 'process.env': env }), new webpack.optimize.UglifyJsPlugin({// 丑化压缩代码 compress: { warnings: false } }), new webpack.optimize.OccurenceOrderPlugin(), // extract css into its own file new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), // 抽离css文件 // generate dist index.html with correct asset hash for caching. // you can customize output by editing /index.html // see https://github.com/ampedandwired/html-webpack-plugin // filename 生成网页的HTML名字，可以使用/来控制文件文件的目录结构，最 // 终生成的路径是基于webpac配置的output.path的 new HtmlWebpackPlugin({ // 生成html文件的名字，路径和生产环境下的不同，要与修改后的publickPath相结合，否则开启服务器后页面空白 filename: config.build.index, // 源文件，路径相对于本文件所在的位置 template: 'index.html', inject: true,// 要把

vue 中build/build.js页面

// https://github.com/shelljs/shelljs
require('./check-versions')() // 检查 Node 和 npm 版本
require('shelljs/global') // 使用了 shelljs 插件，可以让我们在 node 环境的 js 中使用 shell
env.NODE_ENV = 'production'
var path = require('path') 
var config = require('../config') // 加载 config.js
var ora = require('ora') // 一个很好看的 loading 插件
var webpack = require('webpack') // 加载 webpack
var webpackConfig = require('./webpack.prod.conf') // 加载 webpack.prod.conf
console.log( //

输出提示信息～提示用户请在 http 服务下查看本页面，否则为空白页 ' Tip: ' + ' Built files are meant to be served over an HTTP server. ' + ' Opening index.html over file:// won't work. ' ) var spinner = ora('building for production...') // 使用 ora 打印出 loading + log spinner.start() // 开始 loading 动画 /* 拼接编译输出文件路径 */ var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) rm('-rf', assetsPath) /* 删除这个文件夹（递归删除） */ mkdir('-p', assetsPath) /* 创建此文件夹 */ cp('-R', 'static/*', assetsPath) /* 复制 static 文件夹到我们的编译输出目录 */ webpack(webpackConfig, function (err, stats) { // 开始 webpack 的编译 // 编译成功的回调函数 spinner.stop() if (err) throw err process.stdout.write(stats.toString({ colors: true, modules: false, children: false, chunks: false, chunkModules: false }) + ' ') })

项目入口，由package.json 文件可以看出

"scripts": { "dev": "node build/dev-server.js", "build": "node build/build.js", "watch": "node build/build-watch.js"
 },

　当我们执行 npm run dev / npm run build / npm run watch时运行的是 node build/dev-server.js 或 node build/build.js 或node build/build-watch.js

node build/build-watch.js 是我配置的载production环境的配置基础上在webpack的配置模块加上 watch：true 便可实现代码的实时编译

懂视网时间：2022-05-14 22:33

这篇文章主要介绍了关于vue-router+nginx非根路径的配置方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

vue-router 的默认数据hash模式-使用url的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。

一般情况下，我们不喜欢丑丑的hash，类似于index.html#/matchResult，可以使用路由的history模式。history模式是利用history.pushState API来实现页面跳转。

但是有个问题，在使用nginx的时候，我们需要添加一些配置。

直接配置在根路径下

直接配置在根路径下，访问的时候只用输入http://yoursite.com，在nginx的配置如下

location / {
 try_files $uri $uri/ /index.html;
}

非根路径配置

如果一个域名下有多个项目，那么使用根路径配置就不合适了，我们需要在根路径下指定一层路径，比如说

A项目

http://yoursite.com/A

B项目

http://yoursite.com/B

nginx的配置

 location ^~/A {
  alias /XX/A;//此处为A的路径
  index index.html;
  try_files $uri $uri/ /A/index.html;
 }
 location ^~/B {
  alias /XX/B;//此处为B的路径
  index index.html;
  try_files $uri $uri/ /B/index.html;
 }

tip: 注意要用alias不能用root

懂视网时间：2022-05-14 22:43

这篇文章主要介绍了vue 设置路由的登录权限的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下

index.js

将需要登录权限的路由设置meta属性

meta:{requireAuth:true},

main.js

在main.js内直接写对路由的验证

router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限
 if (sessionStorage.getItem("access_token")) { // 判断当前的token是否存在
 next();
 }
 else {
 next({
 path: '/manage',
 query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由
 })
 }
 }
 else {
 next();
 }
});

懂视网时间：2022-05-14 22:57

这篇文章主要介绍了vue-router+nginx 非根路径配置方法，内容挺不错的，现在分享给大家，也给大家做个参考。

vue-router 的默认数据hash模式-使用url的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。

一般情况下，我们不喜欢丑丑的hash，类似于index.html#/matchResult，可以使用路由的history模式。history模式是利用history.pushState API来实现页面跳转。

但是有个问题，在使用nginx的时候，我们需要添加一些配置。

直接配置在根路径下

直接配置在根路径下，访问的时候只用输入http://yoursite.com，在nginx的配置如下

location / {
 try_files $uri $uri/ /index.html;
}

非根路径配置

如果一个域名下有多个项目，那么使用根路径配置就不合适了，我们需要在根路径下指定一层路径，比如说

A项目

http://yoursite.com/A

B项目

http://yoursite.com/B

nginx的配置

 location ^~/A {
 alias /XX/A;//此处为A的路径
 index index.html;
 try_files $uri $uri/ /A/index.html;
 }
 location ^~/B {
 alias /XX/B;//此处为B的路径
 index index.html;
 try_files $uri $uri/ /B/index.html;
 }

tip: 注意要用alias不能用root

懂视网时间：2022-05-14 23:04

这篇文章主要介绍了Vue 动态设置路由参数的案例分析,非常不错，具有参考借鉴价值，需要的朋友可以参考下

在vue中可以动态设置路由参数：

1.使用this.$router.go()，与js histroy.go() 用法一直,前进1，后退-1，当前页面:0

注意使用go时必须是已经有访问历史记录了

案例：

<template>
 <p> 
 <button @click="goht">后退<button> <br/>
 <button @click="goqj">前进<button> <br/>
 <button @click="gosx">刷新当前<button>
 </p>
 </template>
 <script>
 export default {
 methods: {
 goht(){
 this.$router.go(-1);
 },
 goqj(){
 this.$router.go(1);
 },
 gosx(){
 this.$router.go(0); //或者 this.$router.go(); 
 }
 }
 }
 </script>

2.使用push调用：

案例

<template>
 <p>
 <button @click="pageA">去A页面</button> <br/>
 <button @click="pageB">去B页面</button> <br/>
 </p>
</template>
<script> 
 exprot default {
 methods: {
 pageA(){
 //去路由A页面，字符串形式只能是path，类似to="path"
 this.$router.push('/RouterA'); 
 },
 pageB(){
 //去路由B页面，数组形式，类似 :to="{}"
 this.$router.push(
  {
  name: 'RouterB',
  query: {'name': 'name1', title: 'title1'}
  //,params:{'name': 'name2', title: 'title2'}
  }
 );
 }
 }
 }
</script>

懂视网时间：2022-05-14 23:46

Vux是Vue.js的一个ui库，官网在这里，官方文档的配置指南侧重于技术的罗列，我这里简化一下Vux的配置流程。感兴趣的朋友跟随脚本之家小编一起学习吧

简介

Vux（读音 [v'ju:z]，同views）是基于WeUI和Vue(2.x)开发的移动端UI组件库，主要服务于微信页面。

基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。

vux-loader保证了组件按需使用，因此不用担心最终打包了整个vux的组件库代码。

vux并不完全依赖于WeUI，但是尽量保持整体UI样式接近WeUI的设计规范。最初目标是创建一个易用，实用，美观的移动端UI组件库，现在离理想状态还有不少距离，因此需要大家及时反馈问题及贡献代码。

流程

Vux是Vue.js的一个ui库，官网在这里，官方文档的配置指南侧重于技术的罗列，我这里简化一下Vux的配置流程。

1. 安装vux

npm install vux --save

2. 安装less-loader

vux使用less编译源码，所以项目里必须要有less-loader。

npm install less less-loader --save-dev

3. 安装vux-loader并配置vuxLoader：

安装vux-loader：

npm install less vux-loader --save-dev

你可以不安装不配置vux-loader，不配置的话引入组件是这样的：

import AlertPlugin from 'vux/src/plugins/Alert'
import ToastPlugin from 'vux/src/plugins/Toast'

配置之后就可以这样引入组件了：

import { AlertPlugin, ToastPlugin } from 'vux'

配置流程如下：

在webpack.base.config.js中修改如下，其中webpackConfig是你之前的配置（也就是之前module.export右边的那一坨，现在保存为这个变量）：

const vuxLoader = require('vux-loader')
module.exports = vuxLoader.merge(webpackConfig, {
 options: {
 showVuxVersionInfo: false //关闭vux在console里

输出的版本信息 }, plugins: [{ name: 'vux-ui' }] })

上面是我整理给大家的，希望今后会对大家有帮助。

在JS中如何实现网页版计算器

使用JS如何实现小球抛物线轨迹运动

使用JavaScript如何实现二叉树遍历

懂视网时间：2022-05-14 23:54

这篇文章主要给大家总结介绍了关于vue项目之文件夹结构配置的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。

前言

之前一段时间都在使用 vue 开发后台管理系统，在摸索的过程中对 vue 本身和模块化、规范化开发有了更深的认知，现在记录下来，希望对其他需要开发项目的人有帮助。

基于 vue.js 的前端开发环境，用于前后端分离后的单页应用开发，可以在开发时使用 ES Next、scss 等最新语言特性。下面随着小编来一起学习学习吧。

项目配置

首先，在确定好使用的框架和组件库后，先要大致了解它们，做到文档基本熟悉。本次开发使用到的有： vue ， vuex ， axios ， elementUI 。

然后可以按官方指引，使用 vue-cli 搭建 vue 的项目，在项目里按照上面的文档尝试修改，加深理解：

# 安装依赖库，建议指定 vue 和 element 版本，避免版本升级带来意料之外的 bug
$ npm install vue@2.1.6 element-ui@1.4.6 vuex axios
#全局安装脚手架
$ npm install -g vue-cli 
# 创建一个基于 webpack 模板的新项目my-project
$ vue init webpack my-project
# 进入项目目录
$ cd my-project
# 安装依赖
$ npm install
# 运行项目
$ npm run dev

运行之后，看到以下页面表明项目环境搭建成功：

项目结构

搭建成功后，使用编辑器打开项目目录，大致是这样的结构：

相关文件和文件夹的含义：

build 文件夹: 里面是对 webpack 开发和打包的相关设置，包括入口文件、输出文件、使用的模块等；

config 文件夹: 主要是指定开发和打包中的静态资源路径、要压缩的文件类型、开发使用的端口号、开发使用虚拟服务器跨域请求 api 等。

node_modules: 项目的依赖库；

src 文件夹：我们主要操作的地方，组件的增加修改等都在这个文件夹里操作，下文会有详细介绍；

static 文件夹: 静态资源文件夹，放置不会变动的资源，直接被复制到最终的打包目录（默认是dist/static）下；

.babelrc: 使用 babel 的配置文件，用来设置转码规则和插件；

.editorconfig: 代码的规范文件，规定使用空格或 tab 缩进，缩进的长度是两位还是四位之类的代码风格，使用的话需要在编辑器里下载对应的插件；

.eslintignore: 指定 eslint 忽略的文件；

.eslintrc: 配置 eslint 的检测规则，强制按照规则书写代码；

.gitignore: 指定 git 忽略的文件，所有 git 操作均不会对其生效；

.postcssrc: 指定使用的 css 预编译器，里面默认配置了 autoprefixer ，自动补全浏览器前缀；

favicon.ico: 浏览器标签页 title 旁边的小图标，这是需要我们自己粘贴过来的；

index.html: 首页文件，项目运行的时候，会自动将我们在 src 文件夹里生成的组件插入这个文件里；

LICENSE: 项目声明的 license；

package-lock.json: 当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新；

package.json: 指定项目开发和生成环境中需要使用的依赖库；

README.md: 相当于是一个备注文件，对项目开发过程中需要注意的地方进行一些说明。

src 文件夹结构

src 文件夹里的文件夹设置是灵活的，可以根据自己的习惯进行，不必雷同。下面是这次项目的结构：

assets: 放置静态资源，包括公共的 css 文件、 js 文件、iconfont 字体文件、img 图片文件以及其他资源类文件。之所以强调是公共的 css 文件，是因为要在组件的 css 标签里加入 ‘scoped‘ 标记，将其作用范围限制在此组件以及调用它的父级组件中，避免污染全局样式；

components: 放置通用模块组件。项目里总会有一些复用的组件，例如弹出框、发送手机验证码、图片上传等，将它们作为通用组件，避免重复工作；

http: 放置与后台 api 相关的文件。这里面有 axios 库的实例配置文件、使用配置的 axios 实例接入 api 获取数据的函数的集合的文件；

mixins: 放置混合选项的文件。具体来说，相当于是公用函数的集合，在组件中引用时，可以作用于组件而不必书写重复的方法；

pages: 放置主要页面的组件。例如登录页、用户信息页等。通常是这里的组件本身写入一些结构，再引入通用模块组件，形成完整的页面；

router: 放置路由设置文件，指定路由对应的组件；

store: 放置 vuex 需要的状态关联文件，设置公共的 state、mutations 等；

App.vue: 入口组件，pages 里的组件会被插入此组件中，此组件再插入 index.html 文件里，形成单页面应用；

main.js: 入口 js 文件，影响全局，作用是引入全局使用的库、公共的样式和方法、设置路由等。

上面是我整理给大家的，希望今后会对大家有帮助。

在vue.js中整合vux如何实现上拉加载下拉刷新

使用Gulp如何实现静态网页模块化具体怎么做？

使用js实现微信唤起支付宝领红包（详细教程）

利用jqprint如何实现打印页面内容

懂视网时间：2022-05-15 02:54

下面我就为大家分享一篇Vue-Router2.X多种路由实现方式总结，具有很好的参考价值，希望对大家有所帮助。

注意：vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。

推荐使用npm安装。

npm install vue-router

一、使用路由

在main.js中，需要明确安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
Vue.use(VueRouter)

1.定义组件，这里使用从其他文件import进来

import index from './components/index.vue'
import hello from './components/hello.vue'

2.定义路由

const routes = [
 { path: '/index', component: index },
 { path: '/hello', component: hello },
]

3.创建 router 实例，然后传 routes 配置

const router = new VueRouter({
 routes
})

4.创建和挂载根实例。通过 router 配置参数注入路由，从而让整个应用都有路由功能

const app = new Vue({
 router,
 render: h => h(App)
}).$mount('#app')

经过上面的配置之后呢，路由匹配到的组件将会渲染到App.vue里的<router-view></router-view>

那么这个App.vue里应该这样写：

<template>
 <p id="app">
 <router-view></router-view>
 </p>
</template>
index.html里呢要这样写：
<body>
 <p id="app"></p>
</body>

这样就会把渲染出来的页面挂载到这个id为app的p里了。

二、重定向 redirect

const routes = [
 { path: '/', redirect: '/index'}, // 这样进/ 就会跳转到/index
 { path: '/index', component: index }
]

三、嵌套路由

const routes = [
 { path: '/index', component: index,
 children: [
 { path: 'info', component: info}
 ]
 }
]

通过/index/info就可以访问到info组件了

四、懒加载

const routes = [
 { path: '/index', component: resolve => require(['./index.vue'], resolve) },
 { path: '/hello', component: resolve => require(['./hello.vue'], resolve) },
]

通过懒加载就不会一次性把所有组件都加载进来，而是当你访问到那个组件的时候才会加载那一个。对于组件比较多的应用会提高首次加载速度。

五、<router-link>

在vue-router 2中，使用了<router-link></router-link>替换1版本中的a标签

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home" rel="external nofollow" >Home</a>
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- 带查询参数，下面的

结果为 /register?plan=private --> <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

六、路由信息对象

1.$route.path

字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。

2.$route.params

一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。

3.$route.query

一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。

4.$route.hash

当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。

5.$route.fullPath

完成解析后的 URL，包含查询参数和 hash 的完整路径。

6.$route.matched

一个数组，包含当前路由的所有嵌套路径片段的路由记录。路由记录就是 routes 配置数组中的对象副本（还有在 children 数组）。

综合上述，一个包含重定向、嵌套路由、懒加载的main.js如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
Vue.use(VueRouter)
const router = new VueRouter({
 routes:[
 { path: '/', redirect: '/index' },
 { path: '/index', component: resolve => require(['./components/index.vue'], resolve),
 children:[
 { path: 'info', component: resolve => require(['./components/info.vue'], resolve) }
 ]
 },
 { path: '/hello', component: resolve => require(['./components/hello.vue'], resolve) },
 ]
})
const app = new Vue({
 router,
 render: h => h(App)
}).$mount('#app')

上面是我整理给大家的，希望今后会对大家有帮助。

集成vue到jquery/bootstrap项目方法？

在vue.js中实现分页中单击页码更换页面内容

在vue2.0组件中如何实现传值、通信

懂视网时间：2022-05-15 03:02

vue-router 是 Vue.js 官方的路由库.这篇文章主要介绍了vue-router项目实战总结,需要的朋友可以参考下

今天来谈谈vue项目{vue,vue-router,component}三大神将之一的vue-router。作为我们前后端分离很重要的实践之一，router帮我们完成了SPA应用间的页面跳转。

并且，配合axios这样的第三方库，我们可以实现配合后台接口的拦截器功能。

对于一个小型项目而言,router这个文件夹里面就包含了一个router.js就足够了，

但是，当我们的页面比较多的时候，我们就需要分出两个文件出来：一个定义我们的路由和组件，另一个实例化组件，并将路由挂载到vue的实例上。

基本的用法就不多赘述，大家可以看vue-router的官网，认真过一遍的话，基本使用肯定没什么问题。

1.为什么我的路由不起作用?

这里有个非常重要的一点就是当我们去构造VueRouter的实例的时候，传入的参数的问题。

import routes from '@/router/router'
const router = new VueRouter({
 routes // （ES6语法）相当于 routes: routes
})
new Vue({
 router
}).$mount('#app')

如果你这里引入的不是routes，你就要按照下面的方式来写。

import vRoutes from '@/router/router'
const router = new VueRouter({
 routes :vRoutes 
})
new Vue({
 router
}).$mount('#app')

2.在路由中基于webpack实现组件的懒加载

对于我们的vue项目，我们基本都是运用webpack打包的，如果没有懒加载，打包后的文件将会异常的大，造成首页白屏，延时严重，不利于用户体验，而运用懒加载则可以将页面进行划分，webpack将不同组件打包成很多个小的js文件。需要的时候再异步加载，优化用户的体验，换而言之，有的页面可能100个用户只有一两个会进去，何必把流量花在它身上。

import App from '@/App.vue'
const index = r => require.ensure([], () => r(require('@/pages/index/index')), 'index')
export default [{
 path: '/',
 component: App,
 children: [
 {
 path: '/index',
 name:'index',
 component: index
 }]
}]

如果某个组件包含了嵌套路由，我们也可以将两个路由打包到一个js chunk中。

// 这两条路由被打包在相同的块中，访问任一路由都会延迟加载该路由组件
const orderUser= r => require.ensure([], () => r(require('@/pages/order/user')), 'order')
const payRecord= r => require.ensure([], () => r(require('@/pages/order/payRecord')), 'order')

3.router的模式

对于浏览器，我们的router分为两种模式。

1.hash模式（默认）

按照一个uri的基本结构来说，hash模式就是在一个基本的URI的片段进行的处理。如果抛开SPA的话，比较常见的应用场景就是我们在做pc商城的时候，会有比如说：商品详情，评论，商品参数这样的tab切换，就可以使用a标签配合id使用，加上一点运动的特效，效果甚佳。

这也是router默认使用的路由方式。不过，这种方式有一个弊端，就是在接入第三方的支付的时候，我们传入一个url给到第三方支付作为回调地址，但是在支付完成以后，有的第三方支付会把我们的#作为一个截取符号，仅保留第一个#符号前面的url内容，后面再添加相应的回调参数。导致支付完成以后无法跳转到相应的支付页面

传入的url:

http://xx.xx.com/#/pay/123

回调后的地址:

http://xx.xx.com/pay/123?data=xxxxx%xxxx

2.history模式

还有一种就是history的模式。它是使用h5的history.pushState来完成URL的跳转的。使用这种方式来处理跳转的好处就是，url和我们平常看到的没有什么区别。和hash模式作比较的话就是没有了#。不过使用history模式，我们在后台也要去做相应的处理，因为如果直接去访问一个地址，例如http://www.xxxx.com/user/id的时候，如果后端没有配置的时候，后端就会返回404页面。

4.router-link在循环中this.参数名=undefined

<router-link>组件是我们在view层中需要用到的跳转组件。它替代了<a>标签需要做的事情，并且帮助我们做了更多的事情。

无论是 h5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 hash 模式，无须任何变动。

在 HTML5 history 模式下，router-link 会守卫点击事件，让浏览器不再重新加载页面。

当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写（基路径）了。

不过当我们在v-for的循环中使用了router-link的时候，一般来说，我们需要取的都是循环里的值，通过定义的item.xxx就可以取到。如果说需要取一个我们在data中定义的值的时候，我们是通过this.foo来取呢？还是通过foo来取呢？还是都可以？

这里的话，我们是不能通过this.foo来取的，因为这里的this,不再是指向vue的实例了，而是指向了[object Window]。所以用this.foo来取的话，其实是undefined.

 <router-link tag="li" :to="{path:`/user/${item.userID}`}" v-for="(item, index) in userList" :key="index">
 //含有固定的值
 <p>{{this.foo}}</p>
 <p>{{foo}}</p>
 </router-link>
data(){
 return {
 foo:'bar',
 } 
}

4.vue-router配合axios的使用

初次接触拦截器这个概念是在java中，通过拦截器，我们可以对用户的登录状态进行更加粒度的操作。而对于一个SPA的应用来说，没有了后台路由的介入，我们就需要在前端实现一套自己的登录状态的管理机制。

最直观的一点就是，通过用户的token来判断用户是否登录？

router.beforeEach((to, from, next) => {
 const NOW = new Date().getTime();
 if (to.matched.some(r => r.meta.requireAuth)) {
 if(NOW > store.state.deadLine){
 store.commit('CLEAR_USERTOKEN')
 }
 if (store.state.message.login === true) {
 next();
 }
 else {
 next({
 path: '/login',
 query: {redirect: to.fullPath}
 })
 }
 }
 else {
 next();
 }
})

上面的代码中，我们通过vue-router中的全局守卫，在导航触发的时候大致做了如下几件事：

（1）判断导航的页面是否需要登录

（2）超过登录持久期限，清除持久化的登录用户token

（3）没有超过登录期限，判断是否登录状态

（4）没登录，重定向到登录页面

但是，仅仅这样是不够的。因为用户直接不正常注销而直接后台运行网页是很正常的事情，这就导致虽然token是存在的，但是对于后台而言，这个token是无效的，过期的了。所以，我们需要axios配合后台给出的状态码来完善我们的拦截器。

import router from '@/router/routes'
axios.interceptors.response.use(
 success => {
 switch (success .code) {
 case -100:
 router.replace({
 path: 'login',
 query: {redirect: router.currentRoute.fullPath}
 })
 console.warn('注意,登录已过期!')
 break;
 }
 return success;
 },
 error => {
 switch (error.code) {
 case 404:
 console.warn('请求地址有误或者参数错误!')
 break;
 }
 return Promise.reject(error.response.data)
 });

通过后端给到的登录过期状态码，这里以-100为例，我们可以用axios的响应拦截器实现，当我们的token过期的时候，我们将页面重定向到登录页面去。

5.巧用replace替换push

在项目中，我有的同事就是一直this.$router.push(...)，从开始push到结尾。

碰到有的页面，比如说，在选择地址的时候需要知道用户当前所在的城市，如果没有的话，就是重定向到城市列表页面去手动选取。选择完成以后再回到选择地址的页面，如果一直使用push的话，点击选择地址的后退时，就会回退到城市列表页。然后造成页面间的死循环。

这里如果使用replace来操作就没有什么问题了，问题就是我们不应该让城市列表页出现在我们的浏览历史里面。

上面是我整理给大家的，希望今后会对大家有帮助。

在javascript中如何实现填充默认头像

JavaScript的6种正则表达式（详细教程）

react webpack打包后的文件（详细教程）

懂视网时间：2022-05-15 03:02

这次给大家带来使用Vue动态设置路由参数，的注意事项有哪些，下面就是实战案例，一起来看一下。

1.使用this.$router.go()，与js histroy.go() 用法一直,前进1，后退-1，当前页面:0

注意使用go时必须是已经有访问历史记录了

案例：

<template>
 <p> 
 <button @click="goht">后退<button> <br/>
 <button @click="goqj">前进<button> <br/>
 <button @click="gosx">刷新当前<button>
 </p>
 </template>
 <script>
 export default {
 methods: {
 goht(){
 this.$router.go(-1);
 },
 goqj(){
 this.$router.go(1);
 },
 gosx(){
 this.$router.go(0); //或者 this.$router.go(); 
 }
 }
 }
 </script>

2.使用push调用：

案例

<template>
 <p>
 <button @click="pageA">去A页面</button> <br/>
 <button @click="pageB">去B页面</button> <br/>
 </p>
</template>
<script> 
 exprot default {
 methods: {
 pageA(){
 //去路由A页面，字符串形式只能是path，类似to="path"
 this.$router.push('/RouterA'); 
 },
 pageB(){
 //去路由B页面，数组形式，类似 :to="{}"
 this.$router.push(
  {
  name: 'RouterB',
  query: {'name': 'name1', title: 'title1'}
  //,params:{'name': 'name2', title: 'title2'}
  }
 );
 }
 }
 }
</script>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！