路由器不愿意替换` VueRouter -view`标签
路由器不愿意替换<router-view>标签可能是因为以下原因：
- 错误的引入或配置：请确保已正确引入Vue Router并进行了正确的配置。可以检查路由文件中的
routes对象是否正确定义了路由路径和组件。 - 组件未注册或导入错误：确保需要使用的组件已正确注册或导入。在Vue文件中，组件需要通过
components选项或import语句进行导入，并在<script>标签中进行注册。 - 路由视图未正确放置：请确保在Vue模板中正确放置了
<router-view>标签。该标签用于展示通过路由配置加载的组件内容。 - 路由配置错误：检查路由配置中的路径是否正确，确保路由路径与组件名称或路径一致。同时，还需确保路由的
name或path属性没有重复或错误。 - Vue版本不兼容：如果使用的Vue版本与Vue Router不兼容，可能会导致路由器无法替换
<router-view>标签。请确保Vue和Vue Router的版本兼容性。
总结：
Vue Router是Vue.js的官方路由器，用于实现前端应用的路由功能。当路由器不愿意替换<router-view>标签时，需要仔细检查引入和配置是否正确，组件是否正确注册和导入，以及路由配置是否正确。另外，还需注意Vue和Vue Router的版本兼容性。腾讯云提供了云服务器、负载均衡、云数据库等云计算产品，可以满足不同场景下的需求。更多关于腾讯云产品的信息和介绍，可访问腾讯云官方网站：https://cloud.tencent.com/。
相关·内容
1回答
我想在vue-路由器上使用vue.js，但是onclick不起作用。
在App.vue中：
<template>
<div id="app">
<hello></hello>
<router-view></router-view>
</div>
</template>
<script>
import hello from './components/hello/Hello.vue'
export default {
name:
浏览 0提问于2017-02-05得票数 1
回答已采纳
2回答
我完全被困在使用vue.js 2.0和vue路由器通过路由器视图来渲染组件上。
我安装了vue devtools，我确实看到了router-view旁边的"fragment“标签，但没有其他详细信息。
需要注意的是，我使用的是laravel-elixir-vueify和browserify。
App.js
var Vue = require('Vue');
var VueRouter = require('vue-router');
import dashboard from './components/dashboard.vue'
浏览 1提问于2016-10-15得票数 0
1回答
我的main.js看起来像：
import Vue from 'vue'
import VueRouter from './router'
import routes from './router/index.js'
Vue.use(VueRouter)
const router = new VueRouter({
routes,
mode: 'history'
})
new Vue({
el: '#app',
router,
render: h => h(App)
})
我试着从网址上删除标签..。我使用W
浏览 3提问于2017-06-21得票数 1
回答已采纳
我有一个利用Vue-router的Laravel 5.3项目。我在一个模板(home.blade.php)中使用<router-view></router-view>标签。
我遇到的唯一问题是，我似乎无法通过在路由器中键入URL来获得视图。只有当我在刀片文件中使用router-link时，它才起作用。
下面是我实现路由器的主JS文件：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
Vue.use(require('vue-
浏览 1提问于2017-01-11得票数 3
3回答
我使用的是VueJS路由器，但是路由器没有加载组件。
我有About.vue和Contact.vue只需要测试标签-如下所示：
<template>
<div>
<h1>Contact page. Welcome baby!</h1>
</div>
</template>
这里是App.vue，有三个路由器链接和路由器视图.
<template>
<div>
<h1>Routing</h1>
<router-link to=&#
浏览 1提问于2017-09-01得票数 5
回答已采纳
1回答
我的路由器有问题。我想在索引页面上显示bodyComponent，但是什么都没有发生。我用laravel+vue。在哪里我会犯错？我没搞错
我的路由器：
import Vue from 'vue'
import VueRouter from 'vue-router'
import bodyComponent from '../views/bodyComponent'
Vue.use(VueRouter)
const router= new VueRouter({
mode: "history",
routes:
浏览 10提问于2021-02-03得票数 0
1回答
我对vuejs很陌生，在使用它时有一些问题。我创建一个根视图，其中包含2个子组件，rootview.vue文件如下所示：
<template>
<div id="rootView">
<calendar-top-view></calendar-top-view>
<calendar-bottom-view></calendar-bottom-view>
</div>
</template>
<script>
import calendarTo
浏览 6提问于2016-07-07得票数 6
1回答
静态路由器和动态路由器都不能跳转到该页面。
html代码：
<router-link to="/add_peer">Test</router-link>
<router-link :to="{path:'/add_peer'}">Test</router-link>
这是路由器路由器/index.js：
import { createApp,h } from "vue";
import VueRouter from "vue-router";
import {crea
浏览 0提问于2021-08-06得票数 1
如何与vue-路由器一起更改Vuetify选项卡
我使用虚拟标签和路由器参见。
在此示例中，存在两个子组件Foo和Bar。
我想更改活动选项卡和路由从Foo或Bar组件。这是一个简化的例子。我有标准的Vue结构(main.js，App.vue，Foo.Vue，Bar.vue)
我只能通过this.$router.replace更改路由器
谢谢。
JS
const Foo = {
template: '<div>Foo component!</div>'
};
const Bar = {
template: '<div>Bar
浏览 0提问于2019-07-15得票数 0
回答已采纳
我有一个现有的laravel应用程序，其中包含刀片、laravel路由和一些vue组件。所以我不想用vue路由器替换现有的路由。我想要的是在不干扰现有laravel路由的情况下添加额外的路由。
例如，我有一个类别，它已经使用了以下类别
Route::get('category/index' , 'CategoryController@index')->name('category.index');
然后，我想使用vue路由器添加一个新的路由，而不干扰分类路由
举个例子：
import Dashboard from "../views
浏览 2提问于2020-11-15得票数 1
2回答
因此，我试图通过建立一个带有laravel vue vue路由器和vuex的SPA。
我的问题是，不管我做什么，路由器视图都没有呈现，我在这里开始失去希望，它只显示来自vue组件的Hello消息。
只要我知道代码没有任何错误。
这是我的设置和文件
laravel路由器页面: web.php
Route::get('/{any}', [App\Http\Controllers\AppController::class, 'index'])->where('any', '.*');
home.blade.php：
@extend
浏览 1提问于2020-10-19得票数 1
回答已采纳
1回答
因此，当我在主页()上时，我在vue-路由器文件中设置了正确的组件，但是每当我进入时，都会显示一个404错误，我真的不知道为什么。组件的路径正确。
这是我的vue路由器文件：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import loginPage from '../Pages/loginPage'
import dashboard from '../Pages/dashboard'
const router =
浏览 2提问于2021-10-06得票数 0
1回答
我在学vue。我通过npm安装vue-路由器安装vue-路由器.我注册了VueRouter，并在VueRouter实例中main.js文件中定义了url路径。创建关于组件和在app.vue文件中使用的组件。但这条路线在 url或中不起作用。我还试图从url中删除#标记。以下是源代码：
Main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import About from './components/Abou
浏览 1提问于2021-10-14得票数 0
由于Laravel提供了vuejs，因此决定尝试实现路由器链路。
当我检查我的控制台时，我看到了这个错误：
Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
这是我的app.js当前的样子：
import Vue from 'vue'
import VueRouter from 'vue-router
浏览 1提问于2018-04-13得票数 0
我试图学习vue-路由器，我有一个问题的vue-cli3 +vue-路由器演示。
此演示程序使用vue create默认创建。我试图最小化演示，但它仍然不起作用。
我是main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(VueRouter)
const Foo = { template: '<div>foo&l
浏览 0提问于2019-09-01得票数 0
回答已采纳
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See :// webpack . js .org/concepts#loaders
> <template>
| <div class="container">
| <div
浏览 8提问于2020-10-01得票数 2
回答已采纳
我不知道我的代码有什么问题吗？
路由器JS文件
import Vue from 'vue'
import VueRouter from 'vue-router'
import FirstPage from './components/pages/FirstPage.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/new-route', component: FirstPage }
]
export default new VueRouter({
mode:
浏览 0提问于2020-10-08得票数 0
2回答
Laravel历史模式
、、、
我正在用laravel vue和vue路由器建立一个电子商务项目
我想使用vue路由器的历史模式，但它给我带来麻烦。
这是我的密码
new Vue({
el: '#app',
router: new VueRouter({
mode: 'history',
routes
})
});
这是我在web.php中的路线，它有区域设置中间件
Route::group(['prefix' => '{locale}', 'where' => ['lo
浏览 3提问于2020-03-14得票数 3
回答已采纳
我有下面的导航栏组件，它应该链接到我的关于页面视图。当我将鼠标放在路由器链接元素上时，我可以看到Chrome告诉我它应该放在那里： ? 但是当我点击一个链接时，它不会出现在那里。 NavBar.vue组件模板： <template>
<nav>
<input class="search-bar" type="text" placeholder="Search Creators..." />
<ul class="menu-div">
浏览 9提问于2020-04-27得票数 1
回答已采纳
目前我的应用程序呈现在同一页面上，但我希望它呈现到一个新页面。我尝试使用render: h => h(App)进行渲染，但它仍然在同一页上渲染。
下面是路由器将链接到的Vue文件(Risks.vue)：
<router-link to="/risk-info">
<td>{{item.Model}}</td>
<td>{{item.Vulnerability}}</td>
<td>{{item.Unresolved}}</td>
</router-link>
<route
浏览 10提问于2020-06-02得票数 1
1回答
我用vue-路由器方法beforeEnter()实现了一个保护beforeEnter()路由的路由保护。
--我试着测试该路由是否只对进行了保护。
我使用Vuejs 2，vue-路由器，Vuex和vue-test-utils.
router.js
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
routes: [
..., // other routes
{
path: &#
浏览 0提问于2019-10-14得票数 0
回答已采纳
2回答
VueJs:安装组件失败
、、、
我使用的是Vue路由器，而不是加载组件，而是抛出这个模糊的错误：
Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
<Root>
这里是我的入口点(app.js) (注意，我使用多个条目与CommonsChunksPlugin结合使用)：
import Vue from 'vue'
import '../../../assets/css/main.css'
import App
浏览 1提问于2017-08-30得票数 7
1回答
我一直在尝试使用VueRouter和Laravel建立一个简单的vue应用程序。但是vue路由器没有正确地加载组件。
welcome.blade.php
<body>
<div id="app">
<main-app/>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
app.js
//import Vue from 'vue';
window.Vue
浏览 1提问于2019-12-17得票数 0
3回答
我已经创建了一个带有页面标题(h1)的vue路由器。每个vue路由器链接都有一个元标题。如何动态设置h1页面标题？
我尝试过$emit，但这在我的路由器中不起作用。如何更改页面标题？
const dashboard = {
template: `<div>DASHBOARD</div>`
}
const about = {
template: `<div>ABOUT</div>`
}
const routes = [
{path: '/dashboard', component: dashboard, name:
浏览 0提问于2018-04-24得票数 10
回答已采纳
我正面临一个错误，试图使用Vuejs 2+ Vue路由器2+ Laravel 5.3与webpack！
这是我的密码：
我的index.html
<div id="app">
<router-view></router-view>
</div>
我的app.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Map from
浏览 0提问于2016-10-05得票数 2
回答已采纳
1回答
main.js：
import Vue from 'vue';
import App from './App';
import router from './routes/Route';
Vue.config.productionTip = false;
new Vue({
el: '#app',
render: h => h(App),
router
})
Route.js：
import Vue from "vue";
import VueRouter from "vue-router
浏览 1提问于2018-12-27得票数 0
回答已采纳
我正在审查Vue和它的路由器组件，尽管我在让路由器组件工作时遇到了一些问题。控制台出现以下错误：
未定义的ReferenceError:路由器未定义
大家好，
我正在将Vue和VueRouter导入到index.html中，并尽力阅读文档以使路由器初始化，但似乎无法工作。
在index.html中
<script type="module" src="/assets/js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue
浏览 1提问于2019-08-09得票数 2
1回答
我使用VueRouter和HTML5历史记录模式。我用引导'Navs‘和锚标签。当用户单击任何锚标记时，将重新加载Vue应用程序。
html示例
<a href="#tab_contacts" data-toggle="tab">Contacts</a>
是否有通过路由器忽略锚标记的方法？
浏览 1提问于2016-06-01得票数 1
我正在创建一个SPA，它有一个登录屏幕和其他视图。但我面临的问题是，登录屏幕视图也包括在导航栏，但它不应该在那里。然后我使用了路由器导航，它单独显示导航栏，没有任何视图，我认为它也保护Login视图。
App.vue
<template>
<section id="app" class="hero">
<section class="main-content columns is-fullheight has-background-white-bis">
<Navigation
浏览 6提问于2019-12-19得票数 5
回答已采纳
2回答
我对路由器链接有一些问题，我有以下几点：
Routes.js：
import Homepage from './components/homepage/Homepage'
import About from './components/About'
export default{
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Homepage
浏览 1提问于2020-05-06得票数 0
回答已采纳
1回答
我已经用vue路由器启动了一个vue实例。
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
Vue.use(VueRouter);
let router = new VueRouter();
router.start(App, 'body');
当我们使用new短语创建vm组件时，我们可以获得：
var app = new App({
data: {
a: 1,
b: 2
浏览 4提问于2016-04-17得票数 1
回答已采纳
2回答
模拟路由器模块玩笑
、、、
In apiFile.js，
import router from './router';
myFn(){
const url = router.app.$appSettings.redirectUrl
}
./路由器文件，
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [{...}]
const router = new VueRouter({
mode: 'history',
浏览 4提问于2021-06-09得票数 0
伙计们，今天好，
我正在试验rails 6(webpack)和vue js。然而，我发现很难在我的layout.vue组件中设置“路由器-视图”元素。我不确定这是否与涡轮机有关，还是我做错了什么。任何帮助都将不胜感激。
首先是index.html.erb，它只是一个带有webpacker标签来加载main.js的索引页面。
<%= javascript_pack_tag 'main' %>
<div id='hello'>
</div>
接下来是main my main.js
import TurbolinksAdapt
浏览 0提问于2020-02-06得票数 0
1回答
使用Vue 2.6.14，Vue路由器设置为历史模式，URL包含"#“标签破坏动态路径。
const router = new VueRouter({
base: `${process.env.VUE_APP_PUBLIC_PATH}`,
mode: 'history',
routes: [
{
path: '/document/:documentId(.*)',
name: 'Document',
component: Document,
props: true
浏览 7提问于2021-12-18得票数 0
回答已采纳
最近我在Vue路由器上遇到了一个问题，假设我们有一个Vue CLI项目，我们的App组件如下所示：
<template>
<div id="app">
<div class="links">
<router-link to="one">one</router-link>
<router-link to="two">two</router-link>
</div>
<div cla
浏览 2提问于2020-10-15得票数 2
回答已采纳
我使用Vue 2在CLI模式与webpack-简单.我有以下文件：
main.js：
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import Routes from './routes';
Vue.use('VueRouter');
const router = new VueRouter({
routes: Routes,
});
new Vue(
浏览 4提问于2018-05-20得票数 31
1回答
我正试着用拉拉和vue创造一个SPA。还安装了航海家为管理目的。旅行者是。用的是拉里的网络路线。
现在无法访问它，我正在为我的路由使用Vue路由器:例如我的家乡路由(vue)
app.js
...
import VueRouter from 'vue-router';
import App from './components/App.vue';
import Home from './components/Home.vue';
Vue.use(VueRouter);
const router = new VueRouter({
浏览 0提问于2018-06-21得票数 1
1回答
<td>{{ page.url }}</td>
<td>
<b-button href="#wiki/{{page.url}}" variant="primary">View</b-button>
</td>
我正在尝试在我的按钮上填充href。
我还有一个路由器想要这么做
<script>
const router = new VueRouter({
routes:[{
path : '/:id',
name : &
浏览 0提问于2018-05-05得票数 0
回答已采纳
我使用vue-cli命令创建了一个新项目：
vue init webpack myapp
我试图添加vue-router来处理路线，但我遇到了麻烦。
这是我的main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
var Foo = Vue.extend({
template: '<p>This is foo!</p>'
})
var Bar = Vue.extend({
浏览 0提问于2016-09-18得票数 2
回答已采纳
在用vue路由器加载页面时，是否有一种方法可以同时加载多个组件？我已经查看了文档，其中有一个示例他们的站点有一个问题，您需要实际单击"/“链接来加载vue，这里是指向我正在使用的示例的链接，vue在Laravel内部，带有<router-view>的刀片页面将加载首页。
这是我的路由器代码
// Pages front
import Home from "../pages/front/Home.vue";
import Login from "../pages/front/Login.vue";
import Test from ".
浏览 9提问于2020-08-27得票数 1
我是vue新手。如果这是一个愚蠢的问题，很抱歉。我正在使用vue-router来路由到一个组件。当我点击路由器链接时，我的url发生了变化，但是组件的内容没有显示出来。我在开发人员工具中没有得到任何错误。如果你能帮上忙，那将是一个巨大的帮助。 我在这里尝试了关于这个问题的所有答案，但仍然不能正常工作。 src/App.vue <template>
<div id="app">
<router-link to="/toread">Go toread</router-link>
<route
浏览 78提问于2019-05-04得票数 1
回答已采纳
1回答
我正在建立一个具有vuejs路由器的单页应用程序。路由器运行良好，但我想在路由到组件后加载特定的脚本。
Smth喜欢：
const Mine = {
template: ' <div>Another</div>',
load_script: <script src="/static/script.js"></script>
}
我如何才能做到这一点？
现在我在html中有了当前的代码块：
<div id="routing">
<router-view>&l
浏览 1提问于2017-02-20得票数 0
3回答
我在使用Vue路由器。在我的代码中，我曾经有：
<div v-bind:is="page.component_name" v-bind:page="page"></div>
它起作用了，page数据被传递给组件。但是我如何对路由器视图做同样的事情呢？这似乎行不通：
<router-view v-bind:page="page"></router-view>
联署材料：
var vm = new Vue({
...,
router : new VueRouter({
r
浏览 2提问于2018-10-28得票数 3
回答已采纳
1回答
我正在开发一个web应用程序，它使用vue-路由器为SPA与Laravel 5后端。它利用通过.vue运行的应用程序组件的laravel-elixir-vueify文件来创建所需的JavaScript。
我已经成功地设置了Vue -路由器和Vue，并且可以加载与主Vue和Vue路由器实例在同一个文件中定义的组件。
但是，当我尝试并要求包含在.vue文件中的组件时，问题就出现了。尽管browserify / vueify在我检查Vue实例时报告了成功的运行，但是Vue dev-tools在实例中只显示了匿名组件片段，而在router-view中没有标记。
控制台中没有错误，尽管看起来外
浏览 2提问于2016-03-12得票数 5
回答已采纳
3回答
从页面隐藏vue路由器
、、、
是否可以在我的登录页面中隐藏vue路由器？如果是这样，我该怎么做呢？在我有的每个页面上，我都看到了菜单，但在登录页面上，我不想看到它。
下面是我的代码：
登录
<template>
<div>
<h1>Login</h1>
<form action="">
<label>naam</label>
<input type="text">
</form>
&l
浏览 1提问于2017-03-20得票数 3
回答已采纳
我对Vue路由器很陌生，不知道哪里出了问题。单击导航链接会立即显示所需的组件，但随后浏览器会尝试像打开文件一样打开组件。
例如，点击“獾！”链接会导致浏览器试图打开名为file:///home/travis/.../prototype/dist/badger的本地文件，这当然会导致文件找不到错误。
对此有什么见解吗？我试着仔细学习现有的例子。
main.js:
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import
浏览 0提问于2019-03-26得票数 1
回答已采纳
我试图使用vuejs3上的vue-路由器制作一个简单的路由器，并且在第一次单击链接(而不是其他的单击)时收到这个警告：
vue@next:1571 Vue警告:组件缺少模板或呈现函数。
我使用vuejs3，vue-路由器，vscode，chrome on ubuntu。
我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Com
浏览 6提问于2022-01-28得票数 0
回答已采纳
我刚开始学vuejs。我在一个文件.vue上启动了我的第一个vuejs组件。
我想得到一条路线的副翼。但是“这个”没有$route。这是窗户。有人能帮我理解吗？
在main.js中，我将路由器配置为：
var Vue = require('vue');
var VueRouter = require('vue-router');
Vue.use(VueRouter);
const Home = require('./components/home.vue');
const Songbook = require('./component
浏览 5提问于2016-11-14得票数 1
回答已采纳
这是一个棘手的情况。我正在处理一个Django项目，其中一个应用程序的呈现使用了VueJS CDN。就像一样，新的应用程序只能用VueJS呈现。
链接由Vue路由器在基本配置上处理：
// Routess //
let routes = [
{
path: '/',
name: 'home',
component: home,
meta: { scrollPos: { top: 140, left: 0 },
},
},
{
path:
浏览 10提问于2022-03-10得票数 0
我正在尝试做一个管理面板与vue-路由器。实现所有的代码，但不能检查它们是否工作，因为我不能点击链接。路由器链接标签不能使文本可点击。
这是我的刀片档案：
<div id="app">
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<div class="sidebar">
<nav class="mt-2">
<ul class="nav nav-p
浏览 1提问于2020-09-10得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
