『壹』 前端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路由編碼錯誤才會進入的地方。