快捷導(dǎo)航

vue頁面不能根據(jù)路徑進(jìn)行跳轉(zhuǎn)的解決方法

更新時(shí)間：2023年12月06日 14:31:03 作者：徐子元竟然被占了??！

本文主要介紹了vue頁面不能根據(jù)路徑進(jìn)行跳轉(zhuǎn)的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

源碼

app.vue文件

<template>
    <div id="app">
        
    </div>
</template>

<script>
    export default {
        name: 'app',
    }
</script>

<style>

</style>

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/homeView',
    name: 'homeView',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

問題現(xiàn)象

我們創(chuàng)建了很多個(gè)頁面，并且在路由文件補(bǔ)充頁面的跳轉(zhuǎn)路徑。但在瀏覽器的地址欄輸入不用鏈接，卻不能訪問相應(yīng)的頁面。

原因

vue沒有渲染頁面

解決

在app.vue補(bǔ)充

<template>
    <div id="app">
<!--補(bǔ)充的內(nèi)容-->
        <router-view/>
<!--補(bǔ)充結(jié)束-->
    </div>
</template>

<script>
    export default {
        name: 'app',
    }
</script>

<style>

</style>

到此這篇關(guān)于vue頁面不能根據(jù)路徑進(jìn)行跳轉(zhuǎn)的解決方法的文章就介紹到這了,更多相關(guān)vue 路徑跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue中v-model和.sync修飾符的區(qū)別
在平時(shí)開發(fā)是經(jīng)常用到一些父子組件通信,經(jīng)常用到props、vuex等等,下面這篇文章主要給大家介紹了關(guān)于vue中v-model和.sync修飾符區(qū)別的相關(guān)資料,需要的朋友可以參考下
2022-06-06
vue中style設(shè)置scoped后部分樣式不生效的解決
這篇文章主要介紹了vue中style設(shè)置scoped后部分樣式不生效的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-09-09
詳解Vue3的虛擬DOM是如何生成的
這篇文章給大家詳細(xì)介紹了 Vue3 的虛擬DOM生成規(guī)則,文章通過代碼示例和圖片介紹的非常詳細(xì),具有一定的參考價(jià)值,對(duì)我們的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2023-09-09
Vue項(xiàng)目打包壓縮的實(shí)現(xiàn)(讓頁面更快響應(yīng))
這篇文章主要介紹了Vue項(xiàng)目打包壓縮的實(shí)現(xiàn)(讓頁面更快響應(yīng)),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
利用Vue.js實(shí)現(xiàn)求職在線之職位查詢功能
Vue.js是當(dāng)下很火的一個(gè)JavaScript MVVM庫，它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。下面這篇文章主要給大家介紹了關(guān)于利用Vue.js實(shí)現(xiàn)求職在線之職位查詢功能的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-07-07
基于vue的tab-list類目切換商品列表組件的示例代碼
這篇文章主要介紹了基于vue的tab-list類目切換商品列表組件的示例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-02-02
Vue分頁組件實(shí)例代碼
這篇文章主要為大家詳細(xì)介紹了Vue分頁組件的實(shí)例代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
淺談vue中數(shù)據(jù)雙向綁定的實(shí)現(xiàn)原理
本篇文章主要介紹了淺談vue中數(shù)據(jù)雙向綁定的實(shí)現(xiàn)原理，主要使用v-model這個(gè)數(shù)據(jù)雙向綁定，有興趣的可以了解一下
2017-09-09
vant 中van-list的用法說明
這篇文章主要介紹了vant 中van-list的用法說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
基于Vue實(shí)現(xiàn)文件上傳的幾種實(shí)現(xiàn)方式
文件上傳是web開發(fā)中一個(gè)常見的需求,Vue.js作為一款流行的前端框架,也提供了方便的方法來實(shí)現(xiàn)文件上傳功能,下面這篇文章主要給大家介紹了關(guān)于基于Vue實(shí)現(xiàn)文件上傳的幾種實(shí)現(xiàn)方式,需要的朋友可以參考下
2024-03-03