我正在使用 Vue Router，我需要使用router.beforeEach回调来确定是否命中了某个路由。唯一的问题是，当使用回调时，<router-view></router-view>不会呈现任何内容。
app.vue
<template>
<div id="app">
<navComponent></navComponent>
<router-view></router-view>
</div>
</template>
<script>
import navComponent from './nav'
export default {
components: {
navComponent
}
}
</script>
routes.js
import VueRouter from 'vue-router';
export default new VueRouter({
routes: [
{
path: '/',
component: require('./views/home')
},
{
path: '/logout'
}
],
linkActiveClass: 'is-active'
});
app.js
import './bootstrap';
import router from './routes';
import app from './views/app';
router.beforeEach((to, from, next) => { //if this callback was commented out the <router-view></router-view> would render …我正在学习VueJS，使用vue-cli创建了一个新的Vue应用程序，并对其进行了一些更改。这是我在router.js中拥有的：
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Panel from '@/components/Panel'
import Search from '@/components/Search'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
},
{
path: '/panel',
name: 'Panel',
component: Panel,
children: {
path: 'search',
component: Search
}
}
]
})
我的Panel.vue可以正确呈现，而在路由器对象中没有'children'键。这是内容：
<template>
<div class="panel">
<h1>Panel</h1>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'panel',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
} …根据文档，使用带有 vue-router 的 router-link 标签，“设置替换属性将在单击时调用 router.replace() 而不是 router.push()，因此导航不会留下历史记录”。但这似乎并没有发生在我身上，所以我想我一定是误解了一些东西。我的 SPA 中有一个导航菜单，每个菜单项中的路由器链接都有一个替换道具。然而，当我依次单击每个菜单项时，它显然会添加到历史记录中，因为后退按钮将我带回上一项，并且我实际上可以在 Firefox 历史记录中看到添加到的 URL 列表。我究竟做错了什么？
尝试访问 beforeRouteLeave 中的数据，但一切正常 undefined
下面的代码
<template>
...
</template>
<style lang="scss">
...
</style>
<script>
export default {
name: 'blog-new',
data() {
return {
isBodyChanged: false,
isPublished: false,
isTitleChanged: false,
}
},
created() {
...
},
beforeRouteLeave: (to, from, next) => {
console.log(this.isBodyChanged) //<--undefined
if (this.isBodyChanged) {
return next(false)
} else {
return next()
}
}
}
</script>
我正在学习Vue并坚持使用嵌套路由器,我在路由中定义了一些子路由器,但是当我访问子路由时它仍然显示父组件,我的代码如下:
App.vue:
<template>
<div id="app">
<img src="./assets/logo.png">
<router-link :to="{name: 'Home'}">Home</router-link>
<router-link to="/cart">Cart</router-link>
<router-link to="/admin">Admin</router-link>
<router-link to="/admin/add">?Admin Add?</router-link>
<router-link to="/admin/edit">Admin Edit</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
路由器/ index.js:
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/pages/Home'
import Cart from '@/components/pages/Cart'
import Index from '@/components/pages/Admin/Index'
import Add from '@/components/pages/Admin/Add'
import Edit from …每个路线的beforeEach钩子都像在docs中一样：我的页面应在路线更改时滚动到顶部。
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
window.scrollTo(0, 0)
next();
})
但是我的路由器具有其他结构，因此无法正常工作：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Contact from '@/components/Contact'
Vue.use(Router)
export default new Router({
beforeEach: (to, from, next) => {
window.scrollTo(0, 0)
next();
},
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/kontakt',
name: 'Contact',
component: Contact
},
]
})
在此先感谢=）还是在组件上使用.created挂钩滚动到页面顶部更好？
created() {
window.scrollTo(0, 0);
}
在具有以下代码的单页应用程序中使用vue-router，当重定向到mycomponent时，watch $ route函数不会触发。
同样，mycomponent中的beforeRouteUpdate也不会触发。
在组件加载期间，如何检测变量何时被标记到路由上？
应用程序
<template>
<router-view></router-view>
</template>
<script>
import Vue from 'vue'
export default {
name: 'app'
}
</script>
index.js
import Vue from 'vue'
import Router from 'vue-router'
import MyView from '@/views/MyView'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
redirect: '/home',
name: 'Home',
children: [
{
path: '/mycomponent',
name: 'MyComponent',
component: MyComponentView
},
{
path: '/mycomponent/:id',
component: MyComponentView,
props: true
}
]}]})
mycomponent.vue
<template>
<component :is="activeComponent" :id="id"></component>
</template>
<script>
export default {
name: 'MyComponentView',
components: …我在vue应用程序中使用vue-router。我的申请中有以下路线。
const routes = [
{name: "home", path: "/", component: Home},
{name: "user", path: "/user", component: User},
{name: "edit-user", path: "/user/edit", component: EditUser}
];
const router = new VueRouter({
routes: routes,
mode: 'history'
});
在使用router-link以下给定的路径访问时，两条路线都可以正常工作。
<router-link to="/user">Go to user</router-link>
<router-link to="/user/edit">Edit user</router-link>
如果我直接通过页面访问路由，则路由“ / user”会完美工作。但是路由“ / user / edit”显示黑页，控制台中仅包含以下错误（没有其他任何错误详细信息）。
Uncaught SyntaxError: Unexpected token <
谁能帮我解决这个问题？
路线的更改方式对我来说很重要。因此，我想抓住浏览器或gsm的后退按钮更改路线的时间。
这就是我所拥有的：
router.beforeEach((to, from, next) => {
if ( /* IsItABackButton && */ from.meta.someLogica) {
next(false)
return ''
}
next()
})
有没有一些我可以代替IsItABackButton注释使用的内置解决方案？我猜Vue-router本身还没有，但是任何解决方法也可以在这里工作。还是会有另一种首选的方式来识别它？
这是使用Vue官方路由器的延迟加载实现
src /路由器/index.js
import Vue from "vue";
import VueRouter from "vue-router";
const Foo = () => import("@/components/Test2");
const Bar = () => import("@/components/Test");
Vue.use(VueRouter);
export default new VueRouter({
mode: "history",
routes: [
{
path: "/test",
name: "test",
component: Bar
},
{
path: "/test2",
name: "test2",
component: Foo
}
]
});
src / main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
router
}).$mount("#app");
路由按预期工作，但是延迟加载无法正常工作，当我检查第一次加载时的“网络”选项卡时，我能够看到Web Pack生成的延迟加载文件