vue-router怎么不能实现跳转呢

发布于 2022-09-05 00:16:30 字数 1552 浏览 8 评论 0

根据文档的例子试了一下vue-router用在项目中,一进入首页的路径是test.administer/index,但是根据路由配置,不是应该进入首页后跳转到Login.vue这个组件的内容吗?我根据以下的配置,当前进入首页后,显示的是App.vue里面的内容。。

index.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1</title>
    <!--styles-->
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <div id="app"></div>
    <!--scripts-->
    <script src="{{ asset('js/main.js') }}"></script>
</body>
</html>

main.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(VueRouter)
Vue.use(ElementUI)
Vue.use(VueResource)

import App from './App.vue'
import Home from'./components/Home.vue'
import Login from'./components/Login.vue'

const router = new VueRouter({
    routes:[
        { path: '/index', component: Login,
            children: [
                { path: 'homepage', component: Home}
            ]
        }
    ]
})
new Vue(Vue.util.extend({ router },App)).$mount('#app')

App.vue:

<template>
    <div id="app">
        <h1>hello world</h1>
        <router-view></router-view>
    </div>
</template>

login.vue:

<template>
    <div>loginpage</div>
</template>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

压抑⊿情绪 2022-09-12 00:16:30

你哪里有配置是 首页是 Login component 组件嘛


默认需要 /

routes:[
        { path: '/', component: Login,
            children: [
                { path: 'homepage', component: Home}
            ]
        }
    ]

如果你配置成 /index

那么对应网址是

test.administer/index/#/index

test.administer/index/#/index/homepage


另外 app.vue 里面的 hello world 会始终显示的


画中仙 2022-09-12 00:16:30

没有看到你的login路由在哪里,路由的话<router-view></router-view>间的视图会跳,但外面的内容还是保留的。

少女情怀诗 2022-09-12 00:16:30
{ path: 'homepage', component: Home}
应该是
{ path: '/homepage', component: Home}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文