‘壹’ 前端vue在一个路由中怎么重新刷新
这个router是定义的vue-router
‘贰’ vue.js-2.0路由怎么用路由怎么配置
方法/步骤
首先，先来讲个小东西吧。我个人一般在开发的时候都会将ESLint关闭掉。在新建一个项目的时候，会提示你安装否。选择n就行了。也就是no。见下图！如果你不心安装了。也没事。在项目的配置文件中找到它注释掉即可。
首先第一步，在components文件夹里新建两个.vue文件。将用它们来路由页面。并且分别取名router1.router2
接下来，我们就开始配置路由了。首先说几个准备思路吧。第一：页面打开后是要有默认显示页的（默认的路由），第二，同时实现路由切换时像JStab切换效果。接下来，我们要在app.vue里写好2个导航命名为router1和router2。分别用来将router2,router1路由进来。（在这之前请把hello.vue的内容清空，才能看到现面第二张图的效果）
现在基本的准备工作已经做好了。现在看到min.js文件。我个人的习惯是喜欢把路由的配置写在这里或者引入到这里。不习惯放在router文件夹下面的index.js。请看下图片。首先将。原始的router引入的改成VueRouter。然后引入之前新建好的两个.vue文件。记得要use一下。最后创建一个router实例。第一个path / 表示的意思是默认路由进来的组件。也就是router1.
到了这里就差最后一步了。回到app.vue。写上路由。分别给router1,router2加上路由标签。router-link标签渲染时会自动增加一个A标签带href路转。后面的to='',就是将要路由到哪里去的min.js中的path路径。to="/"表示此处将路由显示出min.js路由配置中path为/的component。最后，router-view标签是将路由过来的组件渲染在什么地方。这里写在了导航下面。效果请看第二，第三张图片。第二张图片就是默认进来的路由页面。也就是router1.地址栏中的路径就是首页。第三张图地址栏中路径变了，而且内容也变了。说明路由成功。
最后给路由的导航加上像JS一样的tab切换效果。用到VUE路由中自有的类。router-link-active.意思是在路由激活时更变的class.看图。在style中写好css.页面上就可以看到默认显示的路由组件导航就有class了。不过此时，你已经成功了一半了。因为请看下面第三张图片。当点击router2的时候，出现了两个红色字体。这下尴尬了。
上面有小问题，将会在下一篇分享“嵌套路由－子路由”中给大家解决。如果有性子比较急的请私信我。或者看我简介联系我。喜欢记得投票收藏哦。后续会分享更多关于vue.js组件化开发框架的应用。谢谢大家。
‘叁’ 多页面应用用vue，前端怎么做路由
可能是IP地址XP3系统的网上邻居---属性---本地连接---属性---TCP/IP协议在点下面的属性-然后选手动配置IP-随便填入192.168.1.15子网掩码输入255.255.255.0默认网关1923.168.1.1DNS202.96.128.166202.96.128.86WIN7打开控制面板的网络与共享中心，点击更改适配器设置。右键本地连接2-属性-点击IPv4（协议版本4）在点击下面的属性.在点击使用下面的IP地址随便填入192.168.1.15子网掩码输入255.255.255.0默认网关1923.168.1.1DNS202.96.128.166202.96.128.86在是不行,,有的路由的IP不一样,,上面的不行,你就填192.168.0.15子网掩码输入255.255.255.0默认网关1923.168.0.1DNS202.96.128.166202.96.128.86
‘肆’ vue实现路由跳转的原理是什么，是调用js底层什么方法
前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求有两种方式:
1. 在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航
2. 使用H5的window.history功能，使用URL的Hash来模拟一个完整的URL。
当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
目录结构
先来看看整体的目录结构
和流程相关的主要需要关注点的就是 components、history 目录以及 create-matcher.js、create-route-map.js、index.js、install.js。下面就从 basic 应用入口开始来分析 vue-router 的整个流程。
import Vue from 'vue'
import VueRouter from 'vue-router'
// 1. 插件
// 安装 <router-view> and <router-link> 组件
// 且给当前应用下所有的组件都注入 $router and $route 对象
Vue.use(VueRouter)
// 2. 定义各个路由下使用的组件，简称路由组件
const Home = { template: '<div>home</div>' }
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 3. 创建 VueRouter 实例 router
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/', component: Home },
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
})
// 4. 创建 启动应用
// 一定要确认注入了 router
// 在 <router-view> 中将会渲染路由组件
new Vue({
router,
template: ` <div id="app">
<h1>Basic</h1>
<ul>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/foo">/foo</router-link></li>
<li><router-link to="/bar">/bar</router-link></li>
<router-link tag="li" to="/bar">/bar</router-link>
</ul>
<router-view class="view"></router-view>
</div>
`
}).$mount('#app')04142
作为插件
上边代码中关键的第 1 步，利用 Vue.js 提供的插件机制 .use(plugin) 来安装 VueRouter，而这个插件机制则会调用该 plugin 对象的 install 方法（当然如果该 plugin 没有该方法的话会把 plugin 自身作为函数来调用）；下边来看下 vue-router 这个插件具体的实现部分。
VueRouter 对象是在 src/index.js 中暴露出来的，这个对象有一个静态的 install 方法：
/* @flow */
// 导入 install 模块
import { install } from './install'// ...import { inBrowser, supportsHistory } from './util/dom'// ...export default class VueRouter {
// ...}
// 赋值 install
VueRouter.install = install
// 自动使用插件if (inBrowser && window.Vue) {
window.Vue.use(VueRouter)
}123456789101112131415161718
可以看到这是一个 Vue.js 插件的经典写法，给插件对象增加 install 方法用来安装插件具体逻辑，同时在最后判断下如果是在浏览器环境且存在 window.Vue 的话就会自动使用插件。
install 在这里是一个单独的模块，继续来看同级下的 src/install.js 的主要逻辑：
// router-view router-link 组件import View from './components/view'import Link from './components/link'// export 一个 Vue 引用export let _Vue// 安装函数export function install (Vue) {
if (install.installed) return
install.installed = true
// 赋值私有 Vue 引用
_Vue = Vue // 注入 $router $route
Object.defineProperty(Vue.prototype, '$router', {
get () { return this.$root._router }
}) Object.defineProperty(Vue.prototype, '$route', {
get () { return this.$root._route }
}) // beforeCreate mixin
Vue.mixin({
beforeCreate () { // 判断是否有 router
if (this.$options.router) { // 赋值 _router
this._router = this.$options.router // 初始化 init
this._router.init(this) // 定义响应式的 _route 对象
Vue.util.defineReactive(this, '_route', this._router.history.current)
}
}
}) // 注册组件
Vue.component('router-view', View)
Vue.component('router-link', Link)// ...}0414243
这里就会有一些疑问了？
· 为啥要 export 一个 Vue 引用？
插件在打包的时候是肯定不希望把 vue 作为一个依赖包打进去的，但是呢又希望使用 Vue 对象本身的一些方法，此时就可以采用上边类似的做法，在 install 的时候把这个变量赋值 Vue ，这样就可以在其他地方使用 Vue 的一些方法而不必引入 vue 依赖包（前提是保证 install 后才会使用）。
· 通过给 Vue.prototype 定义 $router、$route 属性就可以把他们注入到所有组件中吗？
在 Vue.js 中所有的组件都是被扩展的 Vue 实例，也就意味着所有的组件都可以访问到这个实例原型上定义的属性。
beforeCreate mixin 这个在后边创建 Vue 实例的时候再细说。
实例化 VueRouter
在入口文件中，首先要实例化一个 VueRouter ，然后将其传入 Vue 实例的 options 中。现在继续来看在 src/index.js 中暴露出来的 VueRouter 类：
// ...import { createMatcher } from './create-matcher'// ...export default class VueRouter {
// ...
constructor (options: RouterOptions = {}) {
this.app = null
this.options = options
this.beforeHooks = []
this.afterHooks = []
// 创建 match 匹配函数
this.match = createMatcher(options.routes || [])
// 根据 mode 实例化具体的 History
let mode = options.mode || 'hash'
this.fallback = mode === 'history' && !supportsHistory if (this.fallback) {
mode = 'hash'
} if (!inBrowser) {
mode = 'abstract'
}
this.mode = mode switch (mode) {
case 'history':
this.history = new HTML5History(this, options.base) break
case 'hash':
this.history = new HashHistory(this, options.base, this.fallback) break
case 'abstract':
this.history = new AbstractHistory(this) break
default:
assert(false, `invalid mode: ${mode}`)
}
}
// ...}
里边包含了重要的一步：创建 match 匹配函数。
match 匹配函数
匹配函数是由 src/create-matcher.js 中的 createMatcher 创建的：
/* @flow */
import Regexp from 'path-to-regexp'// ...import { createRouteMap } from './create-route-map'// ...export function createMatcher (routes: Array<RouteConfig>): Matcher {
// 创建路由 map
const { pathMap, nameMap } = createRouteMap(routes)
// 匹配函数 function match (
raw: RawLocation,
currentRoute?: Route,
redirectedFrom?: Location
): Route {
// ...
} function redirect (
record: RouteRecord,
location: Location
): Route {
// ...
} function alias (
record: RouteRecord,
location: Location,
matchAs: string
): Route {
// ...
} function _createRoute (
record: ?RouteRecord,
location: Location,
redirectedFrom?: Location
): Route { if (record && record.redirect) { return redirect(record, redirectedFrom || location)
} if (record && record.matchAs) { return alias(record, location, record.matchAs)
} return createRoute(record, location, redirectedFrom)
}
// 返回 return match
}
// ...04142434445464748495051
具体逻辑后续再具体分析，现在只需要理解为根据传入的 routes 配置生成对应的路由 map，然后直接返回了 match 匹配函数。
继续来看 src/create-route-map.js 中的 createRouteMap 函数：
/* @flow */import { assert, warn } from './util/warn'import { cleanPath } from './util/path'// 创建路由 mapexport function createRouteMap (routes: Array<RouteConfig>): {
pathMap: Dictionary<RouteRecord>,
nameMap: Dictionary<RouteRecord>
} { // path 路由 map
const pathMap: Dictionary<RouteRecord> = Object.create(null) // name 路由 map
const nameMap: Dictionary<RouteRecord> = Object.create(null) // 遍历路由配置对象 增加 路由记录
routes.forEach(route => {
addRouteRecord(pathMap, nameMap, route)
}) return {
pathMap,
nameMap
}
}// 增加 路由记录 函数function addRouteRecord (
pathMap: Dictionary<RouteRecord>,
nameMap: Dictionary<RouteRecord>,
route: RouteConfig,
parent?: RouteRecord,
matchAs?: string
) {
// 获取 path 、name
const { path, name } = route
assert(path != null, `"path" is required in a route configuration.`) // 路由记录 对象
const record: RouteRecord = {
path: normalizePath(path, parent),
components: route.components || { default: route.component },
instances: {},
name, parent,
matchAs,
redirect: route.redirect,
beforeEnter: route.beforeEnter,
meta: route.meta || {}
} // 嵌套子路由 则递归增加 记录
if (route.children) {// ...
route.children.forEach(child => {
addRouteRecord(pathMap, nameMap, child, record)
})
} // 处理别名 alias 逻辑 增加对应的 记录
if (route.alias !== undefined) { if (Array.isArray(route.alias)) {
route.alias.forEach(alias => {
addRouteRecord(pathMap, nameMap, { path: alias }, parent, record.path)
})
} else {
addRouteRecord(pathMap, nameMap, { path: route.alias }, parent, record.path)
}
} // 更新 path map
pathMap[record.path] = record // 更新 name map
if (name) { if (!nameMap[name]) {
nameMap[name] = record
} else {
warn(false, `Duplicate named routes definition: { name: "${name}", path: "${record.path}" }`)
}
}
}function normalizePath (path: string, parent?: RouteRecord): string {
path = path.replace(/\/$/, '') if (path[0] === '/') return path if (parent == null) return path return cleanPath(`${parent.path}/${path}`)
}57677787980818283
可以看出主要做的事情就是根据用户路由配置对象生成普通的根据 path 来对应的路由记录以及根据 name 来对应的路由记录的 map，方便后续匹配对应。
实例化 History
这也是很重要的一步，所有的 History 类都是在 src/history/ 目录下，现在呢不需要关心具体的每种 History 的具体实现上差异，只需要知道他们都是继承自 src/history/base.js 中的 History 类的：
/* @flow */// ...import { inBrowser } from '../util/dom'import { runQueue } from '../util/async'import { START, isSameRoute } from '../util/route'// 这里从之前分析过的 install.js 中 export _Vueimport { _Vue } from '../install'export class History {// ...
constructor (router: VueRouter, base: ?string) { this.router = router this.base = normalizeBase(base) // start with a route object that stands for "nowhere"
this.current = START this.pending = null
}// ...}// 得到 base 值function normalizeBase (base: ?string): string { if (!base) { if (inBrowser) { // respect <base> tag
const baseEl = document.querySelector('base') base = baseEl ? baseEl.getAttribute('href') : '/'
} else { base = '/'
}
} // make sure there's the starting slash
if (base.charAt(0) !== '/') { base = '/' + base
‘伍’ 前端使用@vue/[email protected]打包，路由懒加载vue文件打包缺失，年初2月份的时候还能正常打包
不要 使用3.5以上的版本 很容易出现问题
你应该 使用稳定版
给你个 建议 更换版本
‘陆’ 前端vue开发 路由元信息可以改变吗
可以
（1）路由定义
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
meta: { requiresAuth: true }// a meta field
}
]
})
这里的
meta 字段就是路由元信息字段，requiresAuth 是自己起的字段名称，用来标记这个路由信息是否需要检测，true 表示要检测，false
表示不需要检测（这个名称随便起，比如我自己的就起的 requiresId，或者你懒得想，就直接 a ,b 这么起，当然，还是比较建议起个有意义的名称）
（2）js
代码
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App },
render: h => h(App),
created () {
this.redrct()
},
methods: {
redrct () {
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresId)) { //这里meta字段的名称要与上面route里面保持一致
// this route requires Id, check if logged in
// if not, redirect to login page.
if (!this.loggedIn()) { // 自己的判断条件
next({
path: '/', // 重定向后的路由
query: { redirect: to.fullPath } // 登录成功之后可以根据query中的内容跳转回原来的路由(页面)
})
} else {
next()
}
} else {
next() // 确保一定要调用 next()
}
})
},
loggedIn () {
var id = sessionStorage.getItem('userId')
if (id === null) { // 未登录
return false
}
return true // 别忘了这句啊，之前忘写了，调了好半天呢
}
}
})
‘柒’ 号称目前最火的前端框架Vue，它有什么显着特点呢
1、Vue是什么- Vue.js 是目前最火的一个前端框架，除了可以开发网站，还可以开发手机App。
- Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架。
- Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。
- Vue.js 是一套用于构建用户界面的渐进式框架。
- 遵循 MVVM 模式
- 编码简洁，体积小，运行效率高，适合移动/PC 端开发
- 它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目
总结一句话：不要在想着怎么操作DOM，而是想着如何操作数据!!
‘捌’ vue路由hash和history
SPA ，即 单页面应用 (Single Page Application)。就是只有一张 web页面的应用。单页应用程序 (SPA) 是加载单个html页面并在 用户与应用程序交互时 动态更新该页面的web应用程序。浏览器一开始会加载必需的html、css和 js ，所有的操作都在这张页面上完成，都由js来控制
对于现代开发的项目来说，稍微复杂一点的SPA，都需要用到 路由 。而 vue-roter 正是 vue 的路由标配，且 vue-router 有 两种模式 ： hash 和 history 。
hash 模式是一种把前端路由的路径用井号 # 拼接在真实 url 后面的模式。当井号 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 onhashchange 事件。
下面用一个网址来演示以上属性：
history API 是 H5 提供的新特性，允许开发者 直接更改前端路由 ，即更新浏览器 URL 地址而 不重新发起请求 。
hash 与 history 在浏览器下刷新时的区别：
正常页面浏览
改造H5 history模式
HTML5新增的API：
主要有以下特点：
对于 history 来说，确实解决了不少 hash 存在的问题，但是也带来了新的问题：
在实际的项目中，如何对这两者进行选择：
‘玖’ 前端vue路由跳转的时候为啥自动进入betgue模式
因为VUE路由格式编写错误，betgue模式是只有VUE路由编码错误才会进入的地方。