标签: vue-router
vue-router没有正确路由,没有显示任何组件
我试图用来vue-router显示不同路线的不同组件.但它似乎没有起作用.
我在这里有一个编译程序的codepen .
我main.js只是定义路由器并启动vue应用程序.它正在导入组件并设置路由.
import scss from './stylesheets/app.styl';
import Vue from 'vue';
import VueRouter from 'vue-router';
import Resource from 'vue-resource';
import App from './components/app.vue';
import Home from './components/home.vue';
import Key from './components/key.vue';
import Show from './components/show.vue';
// Install plugins
Vue.use(VueRouter);
Vue.use(Resource);
// Set up a new router
var router = new VueRouter({
mode: 'history',
routes:[
{ path: '/home', name: 'Home', component: Home },
{ path: '/key', name: 'Key', component: Key },
{ path: '/show', …推荐指数
解决办法
查看次数
`router-link-active` classname意外地应用于指向`/`的<router-link>
我已经使用Vue项目设置了非常基本的路由vue-router.
的router-link-active类名作为预期到有源根被施加.在下面的gif中,当/foo活动时会出现'Foo' 等.
但是,"Hello world"的链接也有router-link-activeclassname.
为什么它会被应用,我怎样才能确保它只在我/(localhost:8080)时才有效？
推荐指数
解决办法
查看次数
vue-router:router-link无法正常工作
我正在尝试使用vue-router和router-link.当我单击链接时,URL会正确更新,但不会加载任何内容<router-view></router-view>.我猜这与使用unpkg CDN有关,而不是用vue-CLI构建它？我不确定为什么这不起作用.
的index.html
....
<body>
....
<nav id="app">
<li><router-link to="/hello">Hello</router-link></li>
<nav>
<!--view-->
<router-view></router-view>
....
<!--vue.js-->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!--router-->
<script src="js/router.js"></script>
</body>
router.js
const Hello = { template: '<div>test</div>' }
const routes = [
{ path: '/hello', component: Hello }
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
我试过去除<li> </li>周围的router-link,但这似乎没有帮助.
推荐指数
解决办法
查看次数
如何在Vue Router上导入具有相同名称的组件
我正在研究VueJs项目，现在正在构造路由器记录。我意识到我可能拥有名称相同的不同组件。如何导入它们并在路线记录中使用它们？配置路由器时，如何使它们的名称唯一？
import Vue from 'vue'
import Router from 'vue-router'
import AllUsers from '../components/Sales/AllUsers'
import AllUsers from '../components/Finance/AllUsers'
...
export default new Router({
routes: [
{
path: '/', name: 'home', component: Home
},
{
path: '/sales/users', name: 'sales-users', component: AllUsers
},
{
path: '/finance/users', name: 'finance-users', component: AllUsers
}
我在这里使用了一个假设示例（因为我也可以将组件SalesUsers和称为FinanceUsers），但是您会同意有时组件确实具有相同的名称。考虑到我需要为每个路由记录指定组件，我该如何处理？
PS：对VueJS来说，这是个新手，因此欢迎提供有关改进和最佳实践的建议。
推荐指数
解决办法
查看次数
VueJS构建到文件夹路由不起作用
我有一个VueJS应用程序,其中包含以下配置:
1)config.index.js
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra …推荐指数
解决办法
查看次数
Vue router:TypeError:无法读取未定义的属性'$ createElement'
所以,我对vue.js很新,这很可能是我的愚蠢错误,但唉,谷歌今天似乎不是我的朋友,因为我已经搜索了2个多小时,发现没有.
尝试加载组件时出现问题.该组件嵌套在其他组件中,并且路由器应该加载它.我有其他组件加载这种方式(使用<router-view></router-view>和路由器)没有任何问题.与此组件唯一不同的是它在其根目录下嵌套了3个级别,而在我的所有其他组件中,我最深的是2个级别.
当我尝试加载此组件时,我收到2警告和错误:
警告1:
[vue-router] Failed to resolve async component render: TypeError: Cannot read property '$createElement' of undefined
警告2:
[vue-router] uncaught error during route navigation
错误:
TypeError: Cannot read property '$createElement' of undefined
at render (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-d2e33d82","hasScoped":false,"optionsId":"0","buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/pages/config-pages/sms/smsConfigDetails.vue (app.js:1656), <anonymous>:5:16)
at eval (vue-router.esm.js?fe87:1774)
at eval (vue-router.esm.js?fe87:1801)
at Array.map (<anonymous>)
at eval (vue-router.esm.js?fe87:1801)
at Array.map (<anonymous>)
at flatMapComponents (vue-router.esm.js?fe87:1800)
at eval (vue-router.esm.js?fe87:1736)
at iterator (vue-router.esm.js?fe87:1943)
at step (vue-router.esm.js?fe87:1717)
我的路由看起来像这样; 我的beforeEnter钩子应该被调用,无法加载的组件是smsConfigDetails:
import allConfigs from 'pages/config-pages/allConfigs'
import …推荐指数
解决办法
查看次数
Laravel Vue Router返回404页
我在我的应用程序中使用Vue Router。用户访问时''，HomeComponent应该加载并运行！但是，当我转到时/login，LoginComponent不会加载，应用程序将我重定向到404页面。请帮忙。
routes.js
import HomeComponent from './components/Home.vue';
import LoginComponent from './components/auth/LoginComponent.vue';
export const routes = [
{path: '', component: HomeComponent},
{path: '/login', component: LoginComponent},
];
app.js
const router = new VueRouter({
mode: 'history',
routes
});
routes/web.php
Route::get('/', function () {
return view('layouts.master');
});
MasterComponent这些路由就是在这里加载的。已HomeComponent加载，但其他组件未加载。实际上，当mode: 'history'我在自己的app.js！在我将模式更改为历史记录之前，它一直运行良好。
推荐指数
解决办法
查看次数
在Vue中,如何使用npm run build将.htaccess包含到生产中？
推荐指数
解决办法
查看次数
如何仅在某些Vue.js组件上显示navbar元素？
我将Vue.js应用程序与vue-router结合使用，分为3部分：
App.vue：
<template>
<div id="app">
<head>
</head>
<NavbarComp/>
<div>
<div class="middle">
<router-view/>
</div>
</div>
<FooterComp/>
</div>
</template>
该<NavbarComp/>包含登录按钮，我想只出现在着陆页：
<template>
<div>
<nav>
<router-link to="/" >
<h3>My Shining app </h3>
</router-link>
<router-link to="/login">
<button v-if="section='landing'"> Login</button>
</router-link>
</nav>
</div>
</template>
我试图section在商店中定义一个，然后将该部分定义为每个组件上的计算属性：
section () {
this.$store.section = 'login';
}
但无法成功。因此，感谢您的提示。
推荐指数
解决办法
查看次数
Nuxt：如何在新标签页中打开页面
我浏览了Nuxt的文档，但是找不到有关如何在新标签页中打开页面的信息。有没有办法在新标签页中打开链接，而不是在当前标签页中打开链接？我尝试了以下代码：
<nuxt-link to="/user" target="_blank">User</nuxt-link>
但这是行不通的。
推荐指数
解决办法
查看次数