标签: vue-router
如何使用vue-router注册全局组件
我正在使用Vue.js和vue-cli.我选择了webpack设置.我连接了main.js文件进行路由,但我找不到全局注册组件的方法.
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Companies from './components/pages/Companies'
import Income from './components/pages/Income'
import Login from './components/pages/Login'
Vue.use(VueRouter)
let router = new VueRouter()
router.map({
'/companies': {
component: Companies
},
'/income': {
component: Income
},
'login': {
component: Login
}
})
router.start(App, 'body')
App.vue
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
import {Auth} from './lib/api'
import Loader from './components/Loader'
export default {
components: {
Loader
},
ready () {
Auth.isLoggedIn().then(
(response) => { …推荐指数
解决办法
查看次数
如何在加载延迟加载的路径组件时显示"加载"动画？
我已经使用webpack的代码拆分功能将我的应用程序拆分为多个块,以便在用户访问我的网页时不会下载整个应用程序包.
某些路由所需的块可能相当大,并且可能需要花费相当多的时间来下载.这很好,除非用户在单击内部链接时不知道页面实际上正在加载,所以我需要以某种方式显示加载动画或其他东西.
我的路由器配置如下:
[
{
path: '/',
component: () => import(/* webpackChunkName: 'landing' */ './landing.vue'),
},
{
path: '/foo',
component: () => import(/* webpackChunkName: 'main' */ './foo.vue'),
},
{
path: '/bar',
component: () => import(/* webpackChunkName: 'main' */ './bar.vue'),
},
]
Vue.js指南中的高级异步组件显示了在解析组件时如何显示特定的"加载"组件 - 这正是我所需要的,但它也说:
请注意,当在vue-router中用作路由组件时,将忽略这些属性,因为在路由导航发生之前会先解析异步组件.
如何在vue-router中实现这一点？如果这是不可能的,延迟加载的组件对我来说几乎没用,因为它会给用户带来糟糕的体验.
推荐指数
解决办法
查看次数
在vue路由器中更改正文样式
我正在使用两页的Vue路由器:
let routes = [
{
path: '/',
component: require('./components/HomeView.vue')
},
{
path: '/intro',
component: require('./components/IntroView.vue')
}
]
这很好,除了我的每个组件都有不同的主体样式:
HomeView.vue:
<template>
<p>This is the home page!</p>
</template>
<script>
export default {
}
</script>
<style>
body {
background: red;
}
</style>
IntroView.vue:
<template>
<div>
<h1>Introduction</h1>
</div>
</template>
<script>
export default {
}
</script>
<style>
body {
background: pink;
}
</style>
我的目标是让这两个页面具有不同的背景样式(最终在它们之间进行过渡).但是当我去home路线(有red背景)的时候,然后点击intro路线,背景颜色保持不变red(我希望它改变为pink).
编辑: index.html:
<body>
<div id="app">
<router-link to="/" exact>Home</router-link> …推荐指数
解决办法
查看次数
Vue-router错误:TypeError:无法读取未定义的属性"匹配"
我正在尝试编写我的第一个Vuejs应用程序.我使用vue-cli和简单的WebPack样板.
当我vue-router向我的应用程序组件添加链接时,我在控制台中收到此错误
渲染函数出错:"TypeError:无法读取未定义的属性'匹配'"
这是我的代码:
App.vue
<template>
<div>
<h2>Links</h2>
<ul>
<router-link to='/'>Home</router-link>
<router-link to='/query'>Query</router-link>
<router-view></router-view>
</ul>
</div>
</template>
<script>
export default {}
</script>
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import routes from './routes.js'
import App from './App.vue'
const app = new Vue({
el: '#app',
routes,
render: h => h(App)
})
routes.js
import VueRouter from 'vue-router';
let routes=[
{
path: '/',
component: require('./Components/Home.vue')
},
{
path: '/query',
component: require('./Components/Query.vue')
}
];
export …推荐指数
解决办法
查看次数
router-link与vue和vuetify混淆
如何使用vue-router使用该预定义模板:
https://vuetifyjs.com/examples/layouts/google-contacts
我在items对象中添加了一个链接
items:
[{ icon: 'dashboard' text: 'Home', link: '/'},
{ icon: 'dashboard' text: 'Account', link: '/account'},
我很困惑把路由器链接组件放在哪里.
推荐指数
解决办法
查看次数
vuejs - 如果已经登录，则从登录/注册重定向到主页，如果未在 vue-router 中登录，则从其他页面重定向到登录
如果登录，我想将用户重定向到主页，并希望访问登录/注册页面，如果未登录，我想将用户重定向到登录页面并希望访问其他页面。有些页面被排除在外，这意味着不需要登录，所以我的代码就在下面：
router.beforeEach((to, from, next) => {
if(
to.name == 'About' ||
to.name == 'ContactUs' ||
to.name == 'Terms'
)
{
next();
}
else
{
axios.get('/already-loggedin')
.then(response => {
// response.data is true or false
if(response.data)
{
if(to.name == 'Login' || to.name == 'Register')
{
next({name: 'Home'});
}
else
{
next();
}
}
else
{
next({name: 'Login'});
}
})
.catch(error => {
// console.log(error);
});
}
});
但问题是它进入了一个无限循环，例如每次登录页面加载而用户未登录时，它会将用户重定向到登录页面，然后再次重定向到登录页面，然后......
我怎样才能解决这个问题？
推荐指数
解决办法
查看次数
Uncaught (in promise) undefined - Vue-router
我面临一个非常奇怪的问题，如果具有受限权限的用户尝试登录我的网络应用程序，他们会看到以下错误：
Uncaught (in promise) undefined
但这不会发生在拥有最大权限的用户身上。
我认为问题是由重新路由引起的。如果用户没有 page_access 1，则路由到 /holidays。另一个奇怪的事情是这个错误只出现一次，也就是用户第一次登录的时候。如果页面刷新或用户导航到其他页面，它不会出现。
路由器.js
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
name: 'dashboard',
component: Dashboard,
beforeEnter(to, from, next) {
if(localStorage.token) {
if(localStorage.page_access.indexOf('1') != -1 && localStorage.page_access != null) {
next('/holidays');
}
else {
next();
}
} else {
next('/login');
}
}
},
{
path: '/holidays',
name: 'holidays',
component: Holidays,
beforeEnter(to, from, next) {
if(localStorage.token) {
next();
} else {
next('/login');
}
}
},
],
mode: 'history'
})
router.beforeResolve((to, from, …推荐指数
解决办法
查看次数
带有 Vue 3 的 Vue 路由器引发错误“Uncaught TypeError: Object(...) is not a function”
使用 CLI 创建了一个简单的 Vue 项目：
vue 创建我的项目
想加两个页面，所以安装了最新版本的vue-router（目前是v3.4.8），按照vue精通教程进行路由。
这是我的 router.js 文件的样子：
import { createWebHistory, createRouter } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', name: 'Home', component: Home },
{ path: '/about', name: 'About', component: About },
]
})
export default router
当然，这就是我的 main.js 文件的样子：
import { createApp } from 'vue'
import router from './router'
createApp({
template: `
<div>
<router-link to='/'>Home</router-link>
<router-link to='/create'>Create</router-link>
</div>
` …推荐指数
解决办法
查看次数
无效的组件名称：“pages/product/_slug.vue”。组件名称应符合 html5 规范中有效的自定义元素名称
我正在使用 Nuxt.js 并有一些动态路由。我的文件夹结构是这样的：
- pages
- product
- _slug.vue
我链接到这样的路线：
<nuxt-link :to="{ name: 'product-slug', params: { slug: product.slug } }">
它工作正常，它显示了正确的 URL 并且还可以很好地引导页面，但是，我的控制台中出现了令人讨厌的红色错误：
[Vue warn]: Invalid component name: "pages/product/_slug.vue". Component names should conform to valid custom element name in html5 specification.
我发现了这个问题，但收效甚微：https : //github.com/nuxt/nuxt.js/issues/165
推荐指数
解决办法
查看次数
如何在Nuxt.js中获取当前路由名称？
我正在使用Nuxt.js来构建静态网站.
如何在组件script代码中访问当前显示的路由名称(我想避免从浏览器位置读取直接URL)？
我可以以某种方式访问$route.name？
推荐指数
解决办法
查看次数
标签 统计
vue-router ×10
vue.js ×9
javascript ×7
nuxt.js ×2
vuejs2 ×2
async-await ×1
promise ×1
routing ×1
vue-loader ×1
vue-router4 ×1
vuejs3 ×1
vuetify.js ×1
webpack ×1