search

Home  >  Q&A  >  body text

javascript - Why can't vue-router implement jump?

According to the example in the document, I tried using vue-router in the project. The path to enter the homepage is test.administer/index. However, according to the routing configuration, it should not jump to the content of the Login.vue component after entering the homepage. ? According to the following configuration, after entering the homepage, the content in App.vue is displayed. .

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>
    <p id="app"></p>
    <!--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>
    <p id="app">
        <h1>hello world</h1>
        <router-view></router-view>
    </p>
</template>

login.vue:

<template>
    <p>loginpage</p>
</template>
phpcn_u1582phpcn_u15822707 days ago819

reply all(3)I'll reply

  • 迷茫

    迷茫2017-07-05 11:00:58

    Where do you have the configuration? The home page is the Login component


    Required by default /

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

    If you configure it as /index

    Then the corresponding URL is

    test.administer/index/#/index

    test.administer/index/#/index/homepage


    In addition, hello world in app.vue will always be displayed


    reply
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-07-05 11:00:58

    I don’t see where your login route is. If you route it, the views between <router-view></router-view> will jump, but the outside content will still be retained.

    reply
    0
  • 習慣沉默

    習慣沉默2017-07-05 11:00:58

    { path: 'homepage', component: Home}
    应该是
    { path: '/homepage', component: Home}

    reply
    0
  • Cancelreply