vue-router解決相同路徑跳轉(zhuǎn)報(bào)錯(cuò)

剛寫完一個(gè)vue的項(xiàng)目，現(xiàn)在總結(jié)和記錄下項(xiàng)目中遇到的問題，加強(qiáng)自己，并且分享給你們。

昨天也看了一下項(xiàng)目，忘記記錄，今天還在看項(xiàng)目，就記錄下。

今天看到路由的時(shí)候，看到下面這句代碼，不知道什么作用了

VueRouter.prototype.push = function push(location) {
? ? return routerPush.call(this, location).catch(error=> error)
}

注釋之后才想起來，進(jìn)相同的路徑會(huì)報(bào)錯(cuò)，加上這句代碼后，就會(huì)不會(huì)報(bào)錯(cuò)了。順便說一嘴，就是進(jìn)入相同的路徑不會(huì)刷新數(shù)據(jù)，我用的方法是監(jiān)聽我們項(xiàng)目的環(huán)節(jié)num，只要這個(gè)改變，就重選請(qǐng)求數(shù)據(jù)。

大致意思就是監(jiān)聽一個(gè)會(huì)改變的變量，重新請(qǐng)求數(shù)據(jù)才會(huì)刷新數(shù)據(jù)。

這個(gè)問題，當(dāng)時(shí)做項(xiàng)目的時(shí)候貌似查了很久，希望可以幫助到你。

vue常見錯(cuò)誤解決

1.運(yùn)行vue時(shí)瀏覽器報(bào)錯(cuò)Unknown custom element: <custom-select> - did you register the component correctly? For recursive components, make sure to provide the "name" option

原因：被引用的組件頁面沒有進(jìn)行export，導(dǎo)致尋找不到瀏覽器console報(bào)錯(cuò)，但是編譯的時(shí)候沒有語法問題不報(bào)錯(cuò)

解決：

方法1： export { default as AppMain } from './AppMain'

方法2：將vue/dist/vue.esm.js注銷，修改為vue/dist/vue.min.js

2.vue router 報(bào)錯(cuò)Uncaught (in promise) NavigationDuplicated {_name:""NavigationDuplicated"... 的解決方法

router-link 會(huì)造成報(bào)錯(cuò)的問題， 報(bào)錯(cuò)內(nèi)容為：

（1）解決方法很簡單，把項(xiàng)目依賴的 node_modules 文件夾刪除， 然后再 npm install 重新下載依賴包就可以解決

（2）發(fā)現(xiàn)以上方法很多人都不能成功解決，經(jīng)過多次嘗試發(fā)現(xiàn)原因可能是 在重新下載依賴包時(shí)，安裝的vue-router還是之前出錯(cuò)的那個(gè)版本，那么要怎么解決呢？解決方法也很簡單，在項(xiàng)目目錄下運(yùn)行 npm i vue-router@3.0 -S 即可

（3）在main.js下添加一下代碼：

import Router from 'vue-router'
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
? return originalPush.call(this, location).catch(err => err)
}

3.Vue報(bào)錯(cuò)  [Vue warn]: Property or method "name" is not defined on the instance but referenced.....    

原因:在data中沒有定義一個(gè)name, 致錯(cuò)     

解決方法:在data中定義一個(gè)name=" ",

[Vue warn]: Property or method "value" is not defined on the instance but referenced.....    

原因:template中定義了屬性，如v-model，但在data中沒有定義一個(gè)value     

解決方法:在data中定義一個(gè)value=" ",

4.Error in render: "TypeError: Cannot read property ‘list’ of undefined"

**報(bào)錯(cuò)：**渲染錯(cuò)誤：“未定義的Type Error：無法讀取屬性”列表

**原因：**沒給list定義，也就是說在temple中用到list了，但是在data中沒定義這個(gè)字段，如果已經(jīng)定義了但是還是報(bào)錯(cuò)，請(qǐng)檢查下自己是否拼錯(cuò)了單詞，因?yàn)槲揖褪沁@么蠢了= =

解決： 

data () {
? return {
? ? list: []
? }
},

5.[Vue warn]: Property or method “message” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

報(bào)錯(cuò)：message沒定義

原因：跟上面的一樣，message在data那里沒有定義，定義一個(gè)初始值就好

解決： 

data() {
?return {
? ? ?message: ''
? }
},

6.Module build failed: Error: No parser and no file path given, couldn’t infer a parser.

報(bào)錯(cuò)：沒有語法分析器和文件路徑，無法推斷解析器

原因：依賴包出現(xiàn)問題，prettier 一個(gè)vue-cli的依賴，把一個(gè)feature 的移除當(dāng)作次版本發(fā)布

解決：npm install --save-dev prettier@1.12.0（刪除 node_modules下_prettier@1.13.0@prettier文件夾）

7.routes forEach is not a function

原因：forEach routes沒有發(fā)現(xiàn)里面有值

解決：

1.查看import {routes} from './routes’這個(gè)路徑是否正確

2.routes是一個(gè)數(shù)組，檢查routes是否是一個(gè)數(shù)組

3.是否已經(jīng)new了一個(gè)router，又再次new一遍? 

// main.js
// 路由配置
const RouterConfig = {
? // 使用HTML5的History模式
? mode: 'history',
? routes: Routers
}
// new VueRouter
const router = new VueRouter(RouterConfig)
?
?
// router.js
// 在router中又再次new一遍，重復(fù)了?。。。?
export default new Router({
? routes: [
? ? {
? ? ? path: '/',
? ? ? name: 'home',
? ? ? component: home
? ? }
? ]
})?

改為：

// router.js
const routers = [
? {
? ? path: '/home',
? ? meta: {
? ? ? title: '主頁'
? ? },
? ? component: (resolve) => require(['../page/home.vue'], resolve)
]
export default routers

8.[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.

原因：被引用的組件頁面沒有進(jìn)行export，導(dǎo)致尋找不到瀏覽器console報(bào)錯(cuò)，但是編譯的時(shí)候沒有語法問題不報(bào)錯(cuò)

解決： 

?export { default as AppMain } from './AppMain'

9.TypeError: Cannot read property ‘vue’ of undefined

報(bào)錯(cuò)信息：ERROR in ./src/login.vue Module build failed (from ./node_modules/_vue-loader@13.7.3@vue-loader/index.js): TypeError: Cannot read property ‘vue’ of undefined at Object.module.exports (F:\VistualStudioCode\threess\node_modules_vue-loader@13.7.3@vue-loader\lib\load er.js:61:18) @ ./src/main.js 7:13-35 @ multi ./node_modules/_webpack-dev-server@3.1.10@webpack-dev-server/client?http://localhost:3000 (webpack)/h ot/dev-server.js ./src/main.js

原因：vue-loader這個(gè)插件被破壞了

解決： 

// 重新安裝依賴
npm install vue-loader@latest --save-dev

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論